不啰嗦上代码：

<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. Jquery plupload上传笔记（修改版）

    找一个好的上传插件不容易啊,最近看好一个上传插件,查了些网上质料,自己做了些改动,记录下来,来彰显自己曾经屌丝过,这插件还不错,支持多个上传和预览 首先引用,发现有的时候想学点新的东西,不过时间久了也 ...

  2. 转 #ifndef/#define/#endif使用详解

    想必很多人都看过“头文件中的 #ifndef/#define/#endif 防止该头文件被重复引用”.但是是否能理解“被重复引用”是什么意思?是不能在不同的两个文件中使用include来包含这个头文件 ...

  3. Android TextView 高亮字体并添加点击事件

    运行效果 package com.zutil.lib; import android.graphics.Typeface; import android.os.Bundle; import andro ...

  4. 我的Android第一章:Android环境搭建

    今天是Android第一天的学习,对于学习任何一门课程时我们都要对该课程要有基本的了解和认识,了解该课程学点什么内容,学了这门知识我门能够做些什么,这也是对于我们这些刚入门的学习人员来说是一个必须要弄 ...

  5. Swift-Switch穿透

    switch vegetable {        case "celery":            print("Add some raisins and make ...

  6. 免费开发者证书真机调试App ID失效问题:"Unable to add App ID because the '10' App ID limit in '7' days has been exceeded."解决方案（5月5号）

    免费开发者证书真机调试App ID失效问题:"Unable to add App ID because the '10' App ID limit in '7' days has been ...

  7. 小结RunLoop

    Core Foundation中关于RunLoop的5个类 CFRunLoopRef CFRunLoopModeRef CFRunLoopSourceRef CFRunLoopTimerRef CFR ...

  8. IntelliJ IDEA 12.1.4 解决中文乱码

    一.进入IDE Settings 里的 Appearance项,选中Override default fonts by ,把 Name 设置为 SimSun,Size 根据自己喜好设置(我一般设为 1 ...

  9. WebServer中异步操作的一些总结

    1.异步操作本身不会改善IO的性能 2.当任务多为IO操作时普通的工作线程将会减少,使CPU对工作线程的维护降低,从而提高CPU对其它任务的利用率 3.如果专用的IO线程,需要执行的专用任务较多时,专 ...

  10. winform ListView应用之分组、重绘图标、网格线 (c# .net winform)

    最近在winform应用中需要用到可分组的数据列表功能,DataGridView默认没有提供分组的功能,而OutlookGrid(http://www.codeproject.com/KB/grid/ ...