<!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>
分享到：
相关推荐
标题“画圆及矩形椭圆等”表明我们正在讨论一个图形绘制工具，它允许用户在界面上绘制基本的几何形状，如圆形、椭圆形和矩形。这个工具可能是一个自定义的绘图库或者一个特定应用程序的一部分，它提供了灵活性来调整...
JavaScript拖曳流程实现是一种在Web应用中创建交互式工作流的方法，它允许用户通过直观的拖放操作来配置和管理任务流程。这种技术通常用于项目管理、任务分配、流程建模等领域，为用户提供了一种无需编写代码即可...
在JavaScript的世界里，图表是一种非常重要的可视化工具，用于将数据以图形的方式呈现，便于人们理解和分析。本资源包含了饼状图、矩形图（条形图）和折线图这三种常见的图表类型，它们在数据分析、网站统计和信息...
在HTML和JavaScript的世界里，创建一个允许用户在上传的图片上拖拽鼠标并画出矩形的功能是一项有趣的挑战。这个功能通常涉及到多个技术点，包括HTML的图像展示、JavaScript事件处理以及HTML5的Canvas元素。以下是对...
在photoEditor项目中，每个功能（如画圆、矩形、箭头等）可能被设计为独立的Vue组件，这样可以提高代码的可维护性和复用性。 2. **指令和计算属性**： Vue提供了一些内置指令，如`v-bind`（用于绑定属性）、`v-on`...
JavaScript 拖曳排序是一种常见的交互功能，常用于列表或网格元素的动态排列，用户可以通过鼠标拖动元素来改变它们的顺序。在这个场景中，我们关注的是一个基于 jQuery 的插件，它使得实现这一功能变得更为简单。...
js javascript 鼠标 坐标 移动速度 方向 角度
最简的JavaScript鼠标经过切换图片.rar最简的JavaScript鼠标经过切换图片.rar最简的JavaScript鼠标经过切换图片.rar最简的JavaScript鼠标经过切换图片.rar最简的JavaScript鼠标经过切换图片.rar最简的JavaScript鼠标...
在JavaScript编程中，实现“鼠标拖动图片”功能是一项常见的交互设计，它可以增强用户体验，让用户更直观地操作和浏览图片。这项技术的核心是利用事件监听和处理，包括鼠标按下、移动和释放等事件，以及对图片位置和...
本教程将深入探讨如何利用SuperMap iClient 6R for JavaScript库来实现一个功能，即当鼠标移动到地图上时，实时显示当前鼠标的地理坐标。SuperMap是一款强大的GIS软件，其iClient系列为开发者提供了丰富的JavaScript...
总结，"javascript网页与鼠标特效"涵盖的内容广泛，从JavaScript基础到DOM操作，再到各种鼠标事件和特效实现，都是网页开发中的重要技能。通过学习和实践，开发者能够创建出更生动、互动性更强的网页，提升用户在...
总结来说，"攻击鼠标的文字"这个JavaScript特效展示了如何利用JavaScript事件处理、DOM操作和动画技巧来创建动态、交互式的网页元素。通过学习和实践这样的例子，开发者可以提升自己的JavaScript技能，创造出更多...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它主要负责处理客户端的交互和动态效果。在网页设计中，鼠标的特效可以增加用户的交互体验，使得网站更加生动有趣。本篇文章将深入探讨如何利用JavaScript...
总的来说，“javascript 鼠标经过图片缓缓增光”是一个结合了JavaScript事件处理和CSS样式变化的典型应用场景。通过理解这些基本概念和技术，开发者可以创造出各种丰富的交互体验，提升网站或应用的用户体验。
同样，软件识别鼠标手势也是一样，“鼠标向左移动手势”输入到算法中，程序检查算法计算结果，如算法输出果结果距离“左”差很远，那么不通过，程序就告诉算法，你要继续改进。如此循环，直到算法输出结果跟输入...
javascript实例应用---鼠标键盘类.rarjavascript实例应用---鼠标键盘类.rarjavascript实例应用---鼠标键盘类.rarjavascript实例应用---鼠标键盘类.rar
根据给定的信息，本文将详细解析如何利用HTML5、CSS3和JavaScript来实现一个具有搜索功能的下拉框以及带有圆角效果的矩形。这一技术实现不仅在现代Web开发中非常常见，而且也是前端开发者必备的一项技能。 ### HTML...
- 可以监听鼠标事件（如`mousedown`、`mousemove`和`mouseup`）来实现用户选择和拖动矩形区域。 - 使用`getBoundingClientRect()`方法获取元素的边界信息，用于计算鼠标位置和热区的关系。 4. **Canvas 绘制蒙版*...
内容概要：html的鼠标手势可以方便用户的操作，本代码用html+Javascript演示了上、下、左、右，对钩，上左，上右，顺时针圈，逆时针圈的鼠标手势识别和响应。本工作是对...
JavaScript 拖曳互换 div 位置的实现主要依赖于 DOM 的拖放API，这是一个用于创建用户界面交互的重要特性。在这个示例中，我们利用 `dragstart`、`ondragover` 和 `ondrop` 事件来实现div元素的拖曳和交换功能。 1....