不啰嗦上代码：

<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. 论使用LeanCloud中遇到的坑

    1.短信验证码 当注册用户的时候,会发现收不到短信验证码,打印e : That operation isn't allowed for clients. 含义 - 该操作无法从客户端发起.请检查该错误 ...

  2. Android开发实战（二十一）：浅谈android:clipChildren属性

    实现功能: 1.APP主界面底部模块栏 2.ViewPager一屏多个界面显示 3......... 首先需要了解一下这个属性的意思 ,即 是否允许子View超出父View的返回,有两个值true . ...

  3. Android 扒开美女衣服

    本文主要实现一个小的扒开美女衣服的游戏项目 效果如下: 项目布局设计: <FrameLayout xmlns:android="http://schemas.android.com/a ...

  4. IOS 四舍五入 进一法 去尾法

    float numberToRound; int result; numberToRound = 4.51; result = (int)roundf(numberToRound); NSLog(@& ...

  5. android关于线程的那些事

    今天发现之前自己一直有个误区,new Runnable(run()方法){}原来它不是一定创建一个线程 如果用主线程的handler去post(Runnable),他就不会创建子线程,而是在主线程上执 ...

  6. 【读书笔记】iOS网络-使用Game Kit实现设备间通信

    Apple的Game Kit框架可以实现没有网络状况下的设备与设备之间的通信,这包括没有蜂窝服务,无法访问Wi-Fi基础设施以及无法访问局域网或Internet等情况.比如在丛林深处,高速公路上或是建 ...

  7. socket编程中服务器端常用函数 以及简单实现

    1 常用函数 1.1   socket() int socket(int family, int type, int protocol); socket()打开一个网络通讯端口,如果成功的话,返回一个 ...

  8. php curl 发送 json 数据

    $urlcon= 'http://localhost/******.php'; $data=' { "button":[ { "type":"clic ...

  9. ExtJs4.1中给列表的单元格设置颜色

    如: 代码: {                                        xtype: 'gridcolumn',                                 ...

  10. itext 实现pdf打印数字上标和下标

    https://kathleen1974.wordpress.com/category/itext-pdf/ In one of my project, we need to give the use ...