代码如下：

<!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 --- 拖拽圆圈的更多相关文章

  1. canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

    引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...

  2. Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理

    我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...

  3. Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理

    今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...

  4. Javascript 拖拽雏形中的一些问题——逐行分析代码，让你轻松了解拖拽的原理

    今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript&q ...

  5. 使用原生JavaScript的Canvas实现拖拽式图形绘制，支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形，不依赖任何库和插件，有演示demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...

  6. HTML5新特性之Canvas+drag(拖拽图像实现图像反转)

    1.什么是canvas 在网页上使用canvas元素时,会创建一块矩形区域,默认矩形区域宽度300px,高度150px.. 页面中加入canvas元素后,可以通过javascript自由控制.可以在其 ...

  7. 原生js实现Canvas实现拖拽式绘图，支持画笔、线条、箭头、三角形和圆形等等图形绘制功能，有实例Demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...

  8. canvas 图片拖拽旋转之一——坐标转换translate

    引言 对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转 ...

  9. javascript——拖拽（完整兼容代码）

    拖拽,是JS经常会用到的效果,在网上有很多的这样那样的拖拽效果,但其中往往大多有各种各养的问题,功能不全,无法兼容,而且修改的时候 也是十分麻烦. 其实拖拽的原理很简单,无非是鼠标的三个动作的解析,以 ...

随机推荐

  1. URAL 1250 Sea Burial 简单Floodfill

    问这个人掉落的海域包含几个岛屿. 八方向相连为同一片海域,四方向相连为同一个岛屿.与边界相连的岛屿不算. 方法:在给定地图外面填充一圈".",从这个人掉落的地方开始进行floodf ...

  2. 深入理解Java内存模型（三）——顺序一致性

    数据竞争与顺序一致性保证 当程序未正确同步时,就会存在数据竞争.java内存模型规范对数据竞争的定义如下: 在一个线程中写一个变量, 在另一个线程读同一个变量, 而且写和读没有通过同步来排序. 当代码 ...

  3. 51nod 1049 1049 最大子段和 （dp）

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1049 令 dp[i]表示为以a[i]结尾的最大子段和,则  dp[i]= ...

  4. SQLServer2008 行转列3

    with a as ( select 日期,学号,名字, '语文' as 科目,语文 as 分数 from tsco union all select 日期,学号,名字, '数学' as 科目,数学 ...

  5. 用java在mysql中随机插入9000 000条数据

    package query; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; ...

  6. design pattern及其使用

    什么是设计模式? design pattern是一个通用的,可以被重用的关于一个常见的问题的解决方案. 为什么要用设计模式? 引入设计模式的理论基础非常简单.我们每天都会碰到问题.我们可能碰到决定使用 ...

  7. 【笨嘴拙舌WINDOWS】键盘消息，鼠标消息

    键盘消息 Windows系统无论何时只有一个窗口(可能是子窗口,也就是控件)能获得焦点. 焦点窗口通过windows消息来响应人的键盘操作,与键盘相关的常用消息罗列如下: WM_KEYDOWN   按 ...

  8. Tyvj 1030 乳草的入侵

    以一个简单的BFS对基础搜索做一个收尾好了. 给一个草,然后以这棵草为九宫格的中心,每周向周围八个方向扩散,问多少个星期能把这个农场占满. 遍历整个map,最后一个出队列的对应的星期数就是所求. // ...

  9. 51nod1403 有趣的堆栈

    看成括号序列的话第二种方法其实就是左括号和右括号之间有多少对完整的括号. #include<cstdio> #include<cstring> #include<ccty ...

  10. Linux磁盘占用100%解决方法

    /opt分区被web日志堆满了,导致一些服务无法正常运行,于是rm -fr掉这些日志(近11GB),但是服务仍没有恢复正常,用df -hT看,该分区占用还是100%: [root@anjing opt ...