<!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>
分享到：
相关推荐
标题“画圆及矩形椭圆等”表明我们正在讨论一个图形绘制工具，它允许用户在界面上绘制基本的几何形状，如圆形、椭圆形和矩形。这个工具可能是一个自定义的绘图库或者一个特定应用程序的一部分，它提供了灵活性来调整...
BMapLib是百度地图API提供的一个扩展库，它包含了各种辅助工具，如画圆、画矩形等，使得地图操作更加便捷。CircleTool类就是专门用于画圆的工具，它提供了创建、设置、删除圆等方法，以及与鼠标交互的事件处理，使...
在JavaScript的世界里，图表是一种非常重要的可视化工具，用于将数据以图形的方式呈现，便于人们理解和分析。本资源包含了饼状图、矩形图（条形图）和折线图这三种常见的图表类型，它们在数据分析、网站统计和信息...
在HTML和JavaScript的世界里，创建一个允许用户在上传的图片上拖拽鼠标并画出矩形的功能是一项有趣的挑战。这个功能通常涉及到多个技术点，包括HTML的图像展示、JavaScript事件处理以及HTML5的Canvas元素。以下是对...
Vue使用鼠标在Canvas上绘制矩形 本文实例为大家分享了Vue使用鼠标在Canvas上绘制矩形的具体代码，供大家参考，具体内容如下 1.代码 <template> ;"> width="460" height="240" @mousedown="mousedown" @...
在这个案例中，我们将探讨如何使用 HTML 和 JavaScript 来实现一个功能：允许用户通过鼠标绘制并拖动一个矩形。 首先，HTML 部分创建了一个具有特定样式的 div 元素，这个元素被称为 `.box`。`.box` 的样式包括红色...
在photoEditor项目中，每个功能（如画圆、矩形、箭头等）可能被设计为独立的Vue组件，这样可以提高代码的可维护性和复用性。 2. **指令和计算属性**： Vue提供了一些内置指令，如`v-bind`（用于绑定属性）、`v-on`...
JavaScript是一种广泛应用于网页和...总之，“JavaScript鼠标特效大全”涵盖了一系列利用JavaScript实现的交互特效，帮助开发者提升网页的互动性和吸引力。通过学习和实践这些技巧，你可以为用户创造更丰富的浏览体验。
- 可以监听鼠标事件（如`mousedown`、`mousemove`和`mouseup`）来实现用户选择和拖动矩形区域。 - 使用`getBoundingClientRect()`方法获取元素的边界信息，用于计算鼠标位置和热区的关系。 4. **Canvas 绘制蒙版*...
js javascript 鼠标 坐标 移动速度 方向 角度
现在，我们使用JavaScript来监听鼠标移入（`mouseover`）和移出（`mouseout`）事件。当鼠标移入图片时，移除灰色滤镜；当鼠标移出时，重新应用滤镜。这里我们使用原生JavaScript或jQuery库来实现： **原生...
最简的JavaScript鼠标经过切换图片.rar最简的JavaScript鼠标经过切换图片.rar最简的JavaScript鼠标经过切换图片.rar最简的JavaScript鼠标经过切换图片.rar最简的JavaScript鼠标经过切换图片.rar最简的JavaScript鼠标...
鼠标移动表格行上行变色的JS脚本,鼠标移动表格行上行变色的JS脚本,
本教程将深入探讨如何利用SuperMap iClient 6R for JavaScript库来实现一个功能，即当鼠标移动到地图上时，实时显示当前鼠标的地理坐标。SuperMap是一款强大的GIS软件，其iClient系列为开发者提供了丰富的JavaScript...
基于javaScript开发的鼠标移动阴影效果+源码+demo演示 基于javaScript开发的鼠标移动阴影效果+源码+demo演示 基于javaScript开发的鼠标移动阴影效果+源码+demo演示 基于javaScript开发的鼠标移动阴影效果+源码+...
总结，"javascript网页与鼠标特效"涵盖的内容广泛，从JavaScript基础到DOM操作，再到各种鼠标事件和特效实现，都是网页开发中的重要技能。通过学习和实践，开发者能够创建出更生动、互动性更强的网页，提升用户在...
同样，软件识别鼠标手势也是一样，“鼠标向左移动手势”输入到算法中，程序检查算法计算结果，如算法输出果结果距离“左”差很远，那么不通过，程序就告诉算法，你要继续改进。如此循环，直到算法输出结果跟输入...
在本项目中，我们关注的是如何使用JavaScript来实现鼠标单击和鼠标滑过触发的tab标签页功能，这在许多现代网页设计中是非常常见的元素。 首先，让我们了解一下JavaScript中的事件处理。在JavaScript中，事件是用户...
javascript实例应用---鼠标键盘类.rarjavascript实例应用---鼠标键盘类.rarjavascript实例应用---鼠标键盘类.rarjavascript实例应用---鼠标键盘类.rar
根据给定的信息，本文将详细解析如何利用HTML5、CSS3和JavaScript来实现一个具有搜索功能的下拉框以及带有圆角效果的矩形。这一技术实现不仅在现代Web开发中非常常见，而且也是前端开发者必备的一项技能。 ### HTML...