不啰嗦上代码：

<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. 操作系统开发系列—13.g.操作系统的系统调用 ●

    在我们的操作系统中,已经存在的3个进程是运行在ring1上的,它们已经不能任意地使用某些指令,不能访问某些权限更高的内存区域,但如果一项任务需要这些使用指令或者内存区域时,只能通过系统调用来实现,它是 ...

  2. android 图片加载库 Glide 的使用介绍

    一:简介 在泰国举行的谷歌开发者论坛上,谷歌为我们介绍了一个名叫 Glide 的图片加载库,作者是bumptech.这个库被广泛的运用在google的开源项目中,包括2014年google I/O大会 ...

  3. iOS多线程实现1-pthread

    1 操作系统.进程.线程简单介绍 现在的程序都是在操作系统上跑,很少有裸机的,而且大部分的嵌入式应用也都支持操作系统,当然还有一些很低端的嵌入式设备没有操作系统. iPhone手机跑的是iOS操作系统 ...

  4. numpy函数fromfunction分析

    从函数规则创建数组是非常方便的方法.在numpy中我们常用fromfunction函数来实现这个功能. 在numpy的官网有这么一个例子. >>> def f(x,y): ... r ...

  5. JavaScript Patterns 5.4 Module Pattern

    MYAPP.namespace('MYAPP.utilities.array'); MYAPP.utilities.array = (function () { // dependencies var ...

  6. 无法连接到WMI提供程序 三种解决办法

    无法连接到WMI 提供程序 请注意,你只能使用SQL Server 配置管理器来管理SQL Server 2005服务器.找不到指定的模块.[0x8007007e] 解决方案1: 检查一下 windo ...

  7. [转]Shell中read的常用方式

    原文:Linux Shell Scripting Tutorial V2.0 read命令的语法: read -p "Prompt" variable1 variable2 var ...

  8. 烂泥：php5.6源码安装及php-fpm配置与nginx集成

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. LNMP环境的搭建中,现在只有php没有源码安装过.这篇文章就把这个介绍下. 注意本篇文章使用的centos 6.5 64bit. 登陆centos下载 ...

  9. 高性能MySQL笔记 第6章 查询性能优化

    6.1 为什么查询速度会慢   查询的生命周期大致可按照顺序来看:从客户端,到服务器,然后在服务器上进行解析,生成执行计划,执行,并返回结果给客户端.其中“执行”可以认为是整个生命周期中最重要的阶段. ...

  10. mysql服务器配置

      mysql的配置文件 /etc/mysql/my.cnf 发现如下配置 # Instead of skip-networking the default is now to listen only ...