<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
font-size: x-small;
}
</style>
<script type="text/javascript">
/**
画点
*/
function makedot(x, y){
pointDiv = "<div style='height:1px;position:absolute;left:" + x +
"px;top:" + y + "px;width:1px;background:#f00;overflow:hidden'></div>";
return pointDiv;
}
/**
函数功能：根据给定的圆心和半径画圆
函数思路：根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标，并画出来。
*/
function circle(x,y,r){ //(x,y)圆心，r半径
var dotx,doty,radio;
var Pi = Math.PI;
var points = "";
points += makedot(x, y);
for(var i = 0;i < 360;i += 0.5){
radio = i * Pi / 180;
dotx = r * Math.cos(radio) + x;
doty = r * Math.sin(radio) + y
points += makedot(dotx, doty);
}
var container = document.getElementById("container");
container.innerHTML = points;
}
/**
函数功能：根据指点矩形左上角坐标及长宽绘制矩形。
函数思路：根据左上坐标及长宽，计算横纵向边每点的坐标
*/
function rect(x,y,w,h){ //(x,y)左上角坐标,w,h 宽与高
var points = "";
for(var i = 0;i < w;i ++){
points += makedot(x + i,y);
points += makedot(x + i,y + h);
}
for(var i = 0;i < h;i ++){
points += makedot(x, y + i);
points += makedot(x + w, y + i);
}
var container = document.getElementById("container");
container.innerHTML = points;
}
/**
获取鼠标位置
*/
function mousePosition(ev){
ev = ev || window.event;
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
var doc = document.documentElement, body = document.body;
var pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
var pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
return {x:pageX, y:pageY};
}
//开始点坐标
var startPoint = null;
//记录鼠标事件
var moveEvent;
var upEvent;
/**
记录开始点，注册鼠标事件
*/
function recordPoint(ev){
var point = mousePosition(ev);
startPoint = point;
moveEvent = document.body.onmousemove;
upEvent = document.body.onmouseup;
if(document.getElementById("circle").checked){
document.body.onmousemove = drawCircle;
}
else {
document.body.onmousemove = drawRect;
}
document.body.onmouseup = endDraw;
}
/**
画圆形
*/
function drawCircle(ev){
var point = mousePosition(ev);
var tx = point.x - startPoint.x;
var ty = point.y - startPoint.y;
tx *= tx;
ty *= ty;
var r = Math.sqrt(tx + ty);
circle (startPoint.x, startPoint.y, r);
}
/**
画矩形
*/
function drawRect(ev){
var point = mousePosition(ev);
rect(startPoint.x, startPoint.y, Math.abs(point.x - startPoint.x), Math.abs(point.y - startPoint.y));
}
/**
结束动作
*/
function endDraw(){
document.body.onmousemove = moveEvent;
document.body.onmouseup = upEvent;
}
</script>
</head>
<body>
<input type="radio" id="circle" name="type" value="1" checked/>圆
<input type="radio" name="type" value="2" />矩形
<div id="container" style="width: 1000px; height: 600px; border:1px #bfbfbf solid;" onmousedown="recordPoint(event);" >
</div>
</body>
</html>
分享到：
相关推荐
为了根据鼠标的移动来画矩形，我们需要监听鼠标的相关事件，比如`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标抬起）。当`mousedown`事件触发时，记录下鼠标的起始位置，作为矩形的左上角坐标...
在JavaScript的世界里，图表是一种非常重要的可视化工具，用于将数据以图形的方式呈现，便于人们理解和分析。本资源包含了饼状图、矩形图（条形图）和折线图这三种常见的图表类型，它们在数据分析、网站统计和信息...
在HTML和JavaScript的世界里，创建一个允许用户在上传的图片上拖拽鼠标并画出矩形的功能是一项有趣的挑战。这个功能通常涉及到多个技术点，包括HTML的图像展示、JavaScript事件处理以及HTML5的Canvas元素。以下是对...
在这个案例中，我们将探讨如何使用 HTML 和 JavaScript 来实现一个功能：允许用户通过鼠标绘制并拖动一个矩形。 首先，HTML 部分创建了一个具有特定样式的 div 元素，这个元素被称为 `.box`。`.box` 的样式包括红色...
在JavaScript中，我们可以监听用户的鼠标动作，如`mousedown`（鼠标按键被按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标按键被释放）等。当用户对某个元素执行拖拽操作时，通常是在`mousedown`事件中记录初始...
JavaScript 最简的JavaScript鼠标经过切换图片.rarJavaScript 最简的JavaScript鼠标经过切换图片.rarJavaScript 最简的JavaScript鼠标经过切换图片.rar
### JavaScript鼠标键盘事件详解 在Web开发中，JavaScript是实现用户交互的重要手段之一。通过监听用户的鼠标和键盘操作，开发者可以构建出响应式且交互丰富的网页应用。本文将重点介绍几种常用的鼠标和键盘事件...
JavaScript是一种广泛应用于网页和...总之，“JavaScript鼠标特效大全”涵盖了一系列利用JavaScript实现的交互特效，帮助开发者提升网页的互动性和吸引力。通过学习和实践这些技巧，你可以为用户创造更丰富的浏览体验。
Vue使用鼠标在Canvas上绘制矩形 本文实例为大家分享了Vue使用鼠标在Canvas上绘制矩形的具体代码，供大家参考，具体内容如下 1.代码 <template> ;"> width="460" height="240" @mousedown="mousedown" @...
Canvas 中文名称叫“画布”，它是游戏中所有UI组件的“容器”。一个场景中，可以允许多个Canvas对象的存在，还允许Canvas之间可以进行“嵌套”使用。需要注意的是，场景中的任何一个UI对象，都肯定是某个Canvas对象...
鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示...
基于javaScript开发的鼠标移动阴影效果+源码+demo演示 基于javaScript开发的鼠标移动阴影效果+源码+demo演示 基于javaScript开发的鼠标移动阴影效果+源码+demo演示 基于javaScript开发的鼠标移动阴影效果+源码+...
同样，软件识别鼠标手势也是一样，“鼠标向左移动手势”输入到算法中，程序检查算法计算结果，如算法输出果结果距离“左”差很远，那么不通过，程序就告诉算法，你要继续改进。如此循环，直到算法输出结果跟输入...
综上所述，实现“JavaScript 鼠标经过图片时显示半透明文字，边框变色”的效果，需要结合JavaScript的事件处理、DOM操作和CSS样式修改。通过监听鼠标事件，动态改变元素的样式，我们能够实现这种交互式的用户体验。...
在JavaScript编程领域中，"鼠标经过切换图片"是一种常见的交互效果，它允许用户在将鼠标指针悬停在特定元素上时，动态地更改显示的图像。这种效果在网站设计中广泛使用，以提升用户体验和视觉吸引力。在这个名为"最...
根据给定的信息，本文将详细解析如何利用HTML5、CSS3和JavaScript来实现一个具有搜索功能的下拉框以及带有圆角效果的矩形。这一技术实现不仅在现代Web开发中非常常见，而且也是前端开发者必备的一项技能。 ### HTML...
### JavaScript 拖曳功能详解 #### 一、概述 拖曳（Drag and Drop）是网页交互设计中的一项重要功能，它可以提供用户一种直观的操作方式，例如：移动、复制或删除对象等。本文将深入解析一份JavaScript代码示例，...
- 可以监听鼠标事件（如`mousedown`、`mousemove`和`mouseup`）来实现用户选择和拖动矩形区域。 - 使用`getBoundingClientRect()`方法获取元素的边界信息，用于计算鼠标位置和热区的关系。 4. **Canvas 绘制蒙版*...
JavaScript 拖曳互换 div 位置的实现主要依赖于 DOM 的拖放API，这是一个用于创建用户界面交互的重要特性。在这个示例中，我们利用 `dragstart`、`ondragover` 和 `ondrop` 事件来实现div元素的拖曳和交换功能。 1....
"网页模板——javascript 鼠标拖动商品图片添加到购物车的功能实例"是一个典型的电商网站功能，它利用JavaScript技术实现了用户可以方便地通过鼠标拖拽商品图片直接添加到购物车的操作。这个功能极大地提升了用户的...