html --- canvas --- javascript --- 拖拽圆圈
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <canvas id="canvas"> 您的浏览器不支持canvas! </canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); canvas.width = 800; canvas.height = 450; function Circle(centreX, centreY, radius) { this.centreX = centreX; this.centreY = centreY; this.radius = radius; } Circle.prototype.paint = function(color){ ctx.beginPath(); ctx.arc(this.centreX, this.centreY, color == COLOR0 ? this.radius + 1 : this.radius, 0, Math.PI*2, true); ctx.fillStyle = color; ctx.fill(); } Circle.prototype.include = function(mouseX, mouseY){ var distanceX = (mouseX - this.centreX) * (mouseX - this.centreX); var distanceY = (mouseX - this.centreY) * (mouseY - this.centreY); var distance = distanceX + distanceY; if(distance - this.radius * this.radius > 0) return false; else return true; } var COLOR0 = "white", COLOR1 = "lightblue"; Circle.prototype.move = function(moveX, moveY){ circle.paint(COLOR0); circle.centreX = moveX; circle.centreY = moveY; circle.paint(COLOR1); } var circle = new Circle(canvas.width/2, canvas.height/2, 45); circle.paint(COLOR1); canvas.addEventListener("mousedown", onMouseDown, false); canvas.addEventListener("mousemove", onMouseMove, false); canvas.addEventListener("mouseup", onMouseUp, false); var movable = false; function onMouseDown(event){ var mouseX = event.pageX - this.offsetLeft; var mouseY = event.pageY - this.offsetTop; if(circle.include(mouseX, mouseY)) movable = true; } function onMouseMove(event){ var mouseX = event.pageX - this.offsetLeft; var mouseY = event.pageY - this.offsetTop; if(movable){ circle.move(mouseX, mouseY) } } function onMouseUp(event){ movable = false; } </script> </body> </html>
下面的圆是可以拖拽的,运行结果如下:
html --- canvas --- javascript --- 拖拽圆圈的更多相关文章
- canvas 图片拖拽旋转之二——canvas状态保存(save和restore)
引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...
- Javascript 拖拽的一些高级的应用——逐行分析代码,让你轻松了解拖拽的原理
我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...
- Javascript 拖拽的一些简单的应用——逐行分析代码,让你轻松了解拖拽的原理
今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...
- Javascript 拖拽雏形中的一些问题——逐行分析代码,让你轻松了解拖拽的原理
今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript&q ...
- 使用原生JavaScript的Canvas实现拖拽式图形绘制,支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形,不依赖任何库和插件,有演示demo
前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...
- HTML5新特性之Canvas+drag(拖拽图像实现图像反转)
1.什么是canvas 在网页上使用canvas元素时,会创建一块矩形区域,默认矩形区域宽度300px,高度150px.. 页面中加入canvas元素后,可以通过javascript自由控制.可以在其 ...
- 原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,有实例Demo
前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...
- canvas 图片拖拽旋转之一——坐标转换translate
引言 对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转 ...
- javascript——拖拽(完整兼容代码)
拖拽,是JS经常会用到的效果,在网上有很多的这样那样的拖拽效果,但其中往往大多有各种各养的问题,功能不全,无法兼容,而且修改的时候 也是十分麻烦. 其实拖拽的原理很简单,无非是鼠标的三个动作的解析,以 ...
随机推荐
- 从WeUI学习到的知识点
WeUI是微信Web服务开发的UI套件, 目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Ic ...
- 阿里Druid数据库连接池使用
阿里巴巴推出的国产数据库连接池,据网上测试对比,比目前的DBCP或C3P0数据库连接池性能更好 可以监控连接以及执行的SQL的情况. 加入项目的具体步骤: 1.导入jar <parent> ...
- http 服务
今天把一个功能模块做成了http服务,这还是第一次写http服务,纪录下来. package com.chuntent.itemsearch; import java.io.BufferedReade ...
- 【USACO】Milking Cows
Three farmers rise at 5 am each morning and head for the barn to milk three cows. The first farmer b ...
- usb协议分析-设备描述符配置包-描述符
/* usb协议分析仅供大家参考---设备描述符配置包,设备描述符, 地址设置, 配置描述符, 字符串描述符 */ /* -1- usb设备描述符配置包 */ typedef struct _USB_ ...
- HDU 2125 Local area network
简单DP,N×M的网格其中有一条边坏掉了,问从起点到终点的放法数 有两种方法,一种是DP很好理解 //#define LOCAL #include <cstdio> #include &l ...
- Codeforces Round #291 (Div. 2)
A 题意:给出变换规则,单个数字t可以变成9-t,然后给出一个数,问最小能够变成多少. 自己做的时候理解成了不能输出前导0,但是题目的本意是不能有前导0(即最高位不能是0,其余位数按照规则就好) 55 ...
- [Swift系列]003- 函数
[基础] Swift函数格式: 1.定义格式: func 函数名(参数名1:数据类型,... ,参数名n:数据类型) -> (返回值类型1,...,返回值类型n){ ///函数体内语句 } ...
- swift2.0 Cannot assign a value of type '[CFString]' to a value of type '[String]'
Cannot assign a value of type '[CFString]' to a value of type '[String]' 代码示例如下: picker.mediaTypes = ...
- 比较满意设计的一次作业 JDBC宠物管理
package com.dao; import java.util.List; import com.entity.Master; public interface MasterDao { publi ...