本文转载在http://bbs.blueidea.com/thread-2979405-1-1.html

哈哈哈，好骚气！终于解决了我的需求。可以移动canvas内的多个元素

<!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=gb2312" />

    <script type="text/javascript">

        var list=[];

        var currentC;

        var _e={};

        var cricle = function(x,y,r){

            this.x=x;

            this.y=y;

            this.r=r;

            this.isCurrent=false;

            this.drawC=function(ctx,x,y){

                ctx.save();

                ctx.beginPath();

                ctx.moveTo(this.x,this.y-this.r);

                ctx.arc(this.x,this.y,this.r,*Math.PI,,true);

                if ((x && y && ctx.isPointInPath(x, y) && !currentC )||this.isCurrent) {

                    ctx.fillStyle = '#ff0000';

                    currentC=this;

                    this.isCurrent=true;

                }else{

                    ctx.fillStyle = '#999999';

                }

                ctx.fill();

            }

        }

        function draw(){

            var canvas = document.getElementById('tutorial');

            if (canvas.getContext){

                var ctx = canvas.getContext('2d');

                for(var i=;i<;i++){

                    var c=new cricle(*i,*i,*i);

                    c.drawC(ctx);

                    list.push(c);

                }

            }

        }

        function reDraw(e){

            e=e||event;

            var canvas = document.getElementById('tutorial');

            var x = e.clientX - canvas.offsetLeft;

            var y = e.clientY - canvas.offsetTop;

            canvas.width = canvas.width;

            if (canvas.getContext){

                var ctx = canvas.getContext('2d');

                for(var i=;i<list.length;i++){

                    var c=list[i];

                    c.drawC(ctx,x,y);

                }

            }

        }

        function show(e){

            e=e||event;

            var canvas = document.getElementById('tutorial');

            var ctx = canvas.getContext('2d');

            var x = e.clientX - canvas.offsetLeft;

            var y = e.clientY - canvas.offsetTop;

            if(currentC){

                currentC.x=parseInt(x+(x-currentC.x)/);

                currentC.y=parseInt(y+(y-currentC.y)/);

            }

            _e=e;

        }

        window.onload=function(){

            var canvas = document.getElementById('tutorial');

            draw();

            canvas.onmousedown=function(e){

                e=e||event;

                var x = e.clientX - canvas.offsetLeft;

                var y = e.clientY - canvas.offsetTop;

                if(currentC)

                    currentC.isCurrent=false;

                currentC=null;

                reDraw(e);

                _e=e;

                var showTimer=setInterval(function(e){

                    reDraw(e);

                },,_e);

                canvas.onmousemove=show;

                document.onmouseup=function(){

                    if(currentC)

                        currentC.isCurrent=false;

                    currentC=null;

                    canvas.onmousemove=null;

                    clearInterval(showTimer);

                }

            }

        }

    </script>

    <style type="text/css">

        canvas { border: 1px solid black; }

    </style>

</head>

<body style="background:#eeeeee;">

<div style="background:#0f0;width:100px;height:100px;position:absolute;left:100px;top:100px;z-index:1;" onclick="alert(1);"></div>

<canvas id="tutorial" width="" height="" style="z-index:100;display:block;position:absolute;"></canvas>

</body>

<script>

</script>

</html>

canvas高级篇（转载）移动元素的更多相关文章

  1. Spark性能优化指南——高级篇（转载）

    前言 继基础篇讲解了每个Spark开发人员都必须熟知的开发调优与资源调优之后,本文作为<Spark性能优化指南>的高级篇,将深入分析数据倾斜调优与shuffle调优,以解决更加棘手的性能问 ...

  2. html5 canvas高级贝塞尔曲线运动动画(好吧这一篇被批的体无完肤！都说看不懂了！没办法加注释了！当然数学不好的我也没办法了，当然这还涉及到一门叫做计算机图形学的学科)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 【转载】Spark性能优化指南——高级篇

    前言 数据倾斜调优 调优概述 数据倾斜发生时的现象 数据倾斜发生的原理 如何定位导致数据倾斜的代码 查看导致数据倾斜的key的数据分布情况 数据倾斜的解决方案 解决方案一:使用Hive ETL预处理数 ...

  4. Redis详解入门篇(转载)

    Redis详解入门篇(转载) [本教程目录] 1.redis是什么2.redis的作者3.谁在使用redis4.学会安装redis5.学会启动redis6.使用redis客户端7.redis数据结构 ...

  5. 【.net深呼吸】动态类型（高级篇）

    前面老周给大家介绍了动态类型使用的娱乐级别用法,其实,在很多情景下,娱乐级别的用法已经满足需求了. 如果,你想自己来控制动态类型的行为和数据的存取,那么,就可以考虑用今天所说的高大上技术了.比如,你希 ...

  6. ORM查询语言（OQL）简介--高级篇：脱胎换骨

    相关文章内容索引: ORM查询语言(OQL)简介--概念篇 ORM查询语言(OQL)简介--实例篇 ORM查询语言(OQL)简介--高级篇:脱胎换骨 ORM查询语言(OQL)简介--高级篇(续):庐山 ...

  7. AWK高级编程 转载

    AWK高级编程 转载 转载自:http://blog.csdn.net/wzhwho/article/details/5513791 1. 程序元素 一个awk 程序是一对以模式(pattern) 与 ...

  8. ORM查询语言（OQL）简介高级篇

    ORM查询语言(OQL)简介--高级篇:脱胎换骨 在写本文之前,一直在想文章的标题应怎么取.在写了<ORM查询语言(OQL)简介--概念篇>.<ORM查询语言(OQL)简介--实例篇 ...

  9. 《JavaScript网页特效经典300例-高级篇》

    <Javascript网页经典特性300例> 高级篇 第18章:ajax应用 Ajax传输JSON数据实例定义一套自己的Ajax框架 第19章:面向对象的特性 定义一个类利用prototy ...

随机推荐

  1. 洛谷P1144最短路计数题解

    最短路计数 此题还是寻找从1到i点总共有几个最短路且每条边的边长为1,对于这种寻找最短路的个数,我们可以反向搜索,即先用\(SPFA\)预处理出所有点的最短路,然后我们反向记忆化搜索,可以用\(sum ...

  2. 基于FPGA的数字秒表（数码管显示模块和按键消抖）实现

    本文主要是学习按键消抖和数码管动态显示,秒表显示什么的,个人认为,拿FPGA做秒表真是嫌钱多. 感谢 感谢学校和至芯科技,笔者专业最近去北京至芯科技培训交流了一周.老师的经验还是可以的,优化了自己的代 ...

  3. topcoder SRM642 div1 hard WheelofFortune

    题目链接:vjudge 大意:有两个人参加一场游戏,这个游戏在一个编号为\(0\text~n-1\)的轮盘上进行,一开始轮盘上的数字均为0:一共有\(m\)轮,每一轮都有一个操作参数\(s_i\),主 ...

  4. 【XSY2484】mex 离散化 线段树

    题目大意 给你一个无限长的数组,初始的时候都为\(0\),有3种操作: 操作\(1\)是把给定区间\([l,r]\)设为\(1\): 操作\(2\)是把给定区间\([l,r]\)设为\(0\): 操作 ...

  5. Gulp 新手使用

    Gulp 注意:gulp依赖于nodejs,在安装前要确保已经安装node环境,如为安装查看<windows系统下nodejs安装及环境配置>安装node环境. 1.全局安装 在命令行执行 ...

  6. 解决nginx发布网站跨目录访问

    解决nginx发布网站跨目录访问(thinkphp5+lnmp) 到:usr/local/nginx/conf/vim fastcgi.cof 把最后一行加上井号#注释掉保存重启 restart 参考 ...

  7. Centos 5 无法使用ifconfig命令

    问题原因,在环境变量里没有包含文件夹 / sbin , 该文件夹下存有 ifconfig, 可以在终端下 cat /etc/profile, 可以发现没有关于 / sbin 的环境变量 解决方法:vi ...

  8. 自学华为IoT物联网_10 IoT联接管理平台配置及开发实验1

    点击返回自学华为IoT物流网 自学华为IoT物联网_10 IoT联接管理平台配置及开发实验1 实验1:OceanConnect平台实验             通过基本的编程操作与配置,帮助读者熟悉O ...

  9. 【转】linux清屏的几种方法

    在windows的DOS操作界面里面,清屏的命令是cls,那么在linux 里面的清屏命令是什么呢?下面笔者分享几种在linux下用过的清屏方法. 1.clear命令.这个命令将会刷新屏幕,本质上只是 ...

  10. sql 语句查所有父级

    常见问题,给一个记录ID,查出它的所有父级,直到顶级 使用SMSS,sql server,找到一个办法. 思路是分两步,先循环找到所有父级的ID,再用IN查出所有父级 列说明  ID=PK  Pare ...