不啰嗦上代码：

<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. git 上的pull request 是什么意思？

    1.git 上有常见的pull request 功能 2.pull request 的含义 解释一:    有一个仓库,叫Repo A.你如果要往里贡献代码,首先要Fork这个Repo,于是在你的Gi ...

  2. Android 手机卫士--xutils说明与下载方法使用

    xUtils简介 xUtils 包含了很多实用的android工具. xUtils 最初源于Afinal框架,进行了大量重构,使得xUtils支持大文件上传,更全面的http请求协议支持(10种谓词) ...

  3. 关于iOS和OS X废弃的API知识点

    今天在查看苹果接口文档时,突然对于接口的声明知识点比较感兴趣,再网络找到下面这个比较不错的文章,记录一下并分享: 如你所知,已废弃(Deprecated)的API指的是那些已经过时的并且在将来某个时间 ...

  4. 利用hexo搭建博客

    利用Hexo搭建博客 以前用Octopress搭过博客,折腾了好久才弄出来,当时看到那巨难看的默认主题,繁琐的操作,一点写东西的欲望都没了. 一次逛微博,看见了Hexo.尝试了一下,真的很好用哦. 下 ...

  5. nginx 配置优化的几个参数(转)

    nginx配置文件里面需要注意的一些参数 worker_processes 8  nginx要开启的进程数 一般等于cpu的总核数 其实一般情况下开4个或8个就可 我开2个 以了 多了没有太多用每个n ...

  6. WPF学习之路（二） XAML

    在WPF中引入了XAML语言,主要用于界面设计,业务逻辑则使用C#实现后台代码,将界面设计与业务逻辑分离 XAML是一种声明式语言,类似XML\HTML 示例: <!--Start Tag--& ...

  7. 编写Java应用程序。首先，定义一个时钟类——Clock，它包括三个int型 成员变量分别表示时、分、秒，一个构造方法用于对三个成员变量（时、分、秒） 进行初始化，还有一个成员方法show()用于显示时钟对象的时间。其次，再定义 一个主类——TestClass，在主类的main方法中创建多个时钟类的对象，使用这 些对象调用方法show()来显示时钟的时间。

    package com.hanqi.test; public class Clock { int hh; int mm; int ss; String time; Clock(int h,int m, ...

  8. Sql server之sql注入篇

    SQL Injection 关于sql注入的危害在这里就不多做介绍了,相信大家也知道其中的厉害关系.这里有一些sql注入的事件大家感兴趣可以看一下 防范sql注入的方法无非有以下几种: 1.使用类型安 ...

  9. 56相册视频(土豆相册视频 激动相册视频 QQ动感影集等)——下载教程

    由于目前流行的相册视频或影集大多是由Flash.音乐和图片组合而成的动画,不属于完整视频,所以不能用常规的解析方法下载. 鉴于很多朋友希望可以下载自己精心制作的相册,故在本教程中,我们将以图文并茂的方 ...

  10. Python搜索目录下指定的文件,并返回绝对路径(包括子目录)

    #!/usr/bin/python #coding=UTF-8 #FileName:search.py #文件搜索 import os; import sys; returnList = []; de ...