不啰嗦上代码：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

</head>

<body>

<canvas id="gameCanvas" width="500px" height="300px"></canvas>

<script>

var cvs = document.getElementById('gameCanvas');

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

//绘制黑色背景

ctx.fillStyle = 'black';

ctx.fillRect(0, 0, 500,300);

//绘制红色矩形

ctx.fillStyle = 'red';

ctx.fillRect(100, 100, 100,100);

//记录矩形的位置

var posX = 100;

var posY = 100;

cvs.onmousedown = function(e){

    var x = e.clientX - posX;

    var y = e.clientY - posY;

    //判断鼠标是否点击在矩形内

    if(e.clientX >= posX + this.offsetLeft && e.clientX <= posX + 100 + this.offsetLeft && e.clientY >= posY + this.offsetTop && e.clientY <= posY + 100 + this.offsetTop){

        document.onmousemove = function(e){

            //ctx.clearRect(posX, posY, 100,100);

            //鼠标拖动时重绘黑色背景

            ctx.fillStyle = 'black';

            ctx.fillRect(0, 0, 500,300);

            //鼠标拖动时重绘红色矩形

            ctx.fillStyle = 'red';

            ctx.fillRect(e.clientX-x, e.clientY-y, 100,100);

            //记录矩形的位置

            posX = e.clientX-x;

            posY = e.clientY-y;

        };

        document.onmouseup = function(){

            document.onmousemove = null;

        };

    }

};

</script>

</body>

</html>

实现鼠标拖动canvas绘制的图片的更多相关文章

  1. [HTML5] Canvas绘制简单图片

    获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象的onload方法,调用context对象的drawImage()方法,参数:Image对象,x坐标, ...

  2. 图片3d轮放查看效果(V2.0)：使用鼠标拖动实现图片的轮放

    上面的版本号为通过左右button实现图片轮放,这个版本号.是通过在窗体拖动鼠标.左右滑动图片. 关键点在于选择一个合适的值.使鼠标拖动时.全部图片均可显示,可是不会滑动过快或离开窗体. 不多说,直接 ...

  3. html5新特性canvas绘制图像

    在前端页面开发过程中偶尔会有需要对数据进行相应的数学模型展示,或者地理位置的动态展示,可能就会想到用canvas,网上有很多已经集成好的,比如说类似echarts,确实功能非常强大,而且用到了canv ...

  4. 用canvas实现鼠标拖动绘制矩形框

    需要用到jCanvas插件和jQuery. jCanvas下载:https://raw.githubusercontent.com/caleb531/jcanvas/master/jcanvas.mi ...

  5. openLayers 4 canvas图例绘制，canvas循环添加图片，解决图片闪烁问题

    一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘 ...

  6. Canvas绘制不规则图形，实现可拖动，编辑--V1.0第一篇

    目前的工作在做在线的标注工具,接触canvas一年了,各种绘制,基本上图像的交互canvas都可以完成,也写了几篇关于canvas的文章,遇到的问题也写博客上了,对于canvas有问题的朋友可以去看看 ...

  7. canvas绘制图片drawImage学习

    不得不说,html5中的canvas真的非常强大,从图片处理,到视频处理,再到游戏开发,都能见到canvas的身影,然而,就这一个<canvas>标签,功能居然如此强大,这主要归功于can ...

  8. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  9. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

随机推荐

  1. Swfit 字符与字符串

    Swfit 字符与字符串 OC 定义字符 char charValue = 'a'; Swift 定义字符 var charValue:Character = "a" Unicod ...

  2. java中实现线程同步

    为何要使用同步? java允许多线程并发控制,当多个线程同时操作一个可共享的资源变量时(如数据的增删改查), 将会导致数据不准确,相互之间产生冲突,因此加入同步锁以避免在该线程没有完成操作之前,被其他 ...

  3. iOS开发之Runtime使用

    runtime简介 RunTime简称运行时.OC就是运行时机制,也就是在运行时候的一些机制,其中最主要的是消息机制. 对于C语言,函数的调用在编译的时候会决定调用哪个函数. 对于OC的函数,属于动态 ...

  4. windows svn 上传后 自动部署 到web目录下

    第一步 把web目录设置为工作目录 "D:\Program Files (x86)\VisualSVN Server\bin\svn.exe" upgrade "D:\y ...

  5. 关于jquery跨域请求方法

    转载 http://www.cnblogs.com/benwu/archive/2012/12/25/2832981.html 项目中关于ajax jsonp的使用, 出现了问题:可以成功获得请求结果 ...

  6. JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）

    在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...

  7. java编写冒泡排序

    int[] arry={7,1,6,5,3,4,9,8,2}; for(int a=0;a<arry.length;a++) { for(int b=a+1;b<arry.length;b ...

  8. English -有感过四六级后的托福单词表-附下载

    好像自从上学期不高不低过了六级之后就没怎么持续接触英语的东西了,欧,除了要debug的时候遇到问题了,去Google到了再用那些仅有的英语知识去看别人的文章.可能是因为看到的都是自己平时接触过的方面的 ...

  9. Linux目录操作

    mkdir() #include <sys/stat.h> #include <sys/types.h> int mkdir(const char *pathname, mod ...

  10. C中的数组与指针问题

    反复在数组名与指针上犯错误,特记录下. ,,,,}; int *p, *q; p = (); q = (); *(p+1)?   *(q-1) ? 答案是 3, 5.这里主要涉及的问题就是指针参与运算 ...