关于canvas 的基础知识就不多说了，可以进这个网址学习

http://www.w3school.com.cn/html5/html_5_canvas.asp

对于canvas 和 SVG 其实一开始个人是比较倾向于SVG多一点，不过后来工作需要，又学习了下canvas, 
这两个之间主要不同是 canvas是在JavaScript中绘制，SVG则是在 XML 绘制

其实canvas 主要的工作就是绘制图像，图表之类的工作，对于一些可操作的特效个人还是更喜欢用canvas + div 来实现； 
如果不是特别难的需求能做到尽量做<(￣︶￣)↗[GO!]

列出一个demo 这个主要功能就是canvas 内图片拖拽 
（想要拖拽什么可以直接更换JavaScript 中第3、4、5句）；

说是拖拽，但也只是目测看起是 “像”是，其实在每次鼠标移动的时候都会先清掉之前画好的，再在鼠标所在的位置重新绘制一个，全套demo如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         body,div{

             margin:0;

             padding:0;

         }

         #d1{

             width:500px;

             height: 400px;

             border: 2px solid #00FFD1;

         }

     </style>

 </head>

 <body>

 <div id="d1">

     <canvas id="myCanvas" width="500" height="400">

         <p>您的系统不支持此程序!</p>

     </canvas>

 </div>

 <script>

     const canva=document.getElementById("myCanvas");

     const cansText=canva.getContext("2d");

     let img = new Image();

     img.src="http://www.w3school.com.cn/i/ct_html5_canvas_circle.gif";

     cansText.drawImage(img,50,50,150,100);

     //在事件外声明需要用到的变量

     let ax,ay,x,y;

     canva.onmousedown=function (e) {

         canva.onmousemove = function(e){

              x= e.clientX;y=e.clientY;

             //限制移动不能超出画布

             (x<173)? ax=75 : ax=425;

             (y<148)? ay=50 : ay=350;

             (x < 425 && x >75)? x =e.clientX : x =ax;

             (y > 50 && y <350) ? y=e.clientY : y=ay;

             //先清除之前的然后重新绘制

             cansText.clearRect(0,0,canva.width,canva.height);

             cansText.drawImage(img,x-75,y-50,150,100);

         };

         canva.onmouseup = function(){

             canva.onmousemove = null;

             canva.onmouseup = null;

         };

     }

 </script>

 </body>

 </html>

补充：点击图片非中心移动时，会自动跳动到，图片以当前光标为中心

原链：https://blog.csdn.net/freedomVenly/article/details/79042536

HTML5 -canvas拖拽、移动 绘制图片可操作移动，拖动的更多相关文章

  1. 基于html5可拖拽图片循环滚动切换

    分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="s ...

  2. canvas拖拽效果

    canvas拖拽和平时用的js拖拽是有区别的 普通的js是设置目标为绝对定位,再根据鼠标的移动来改变left和top的值 canvas是获得了鼠标的位置,直接在目标点进行重新绘制 下面给一个简单的拖拽 ...

  3. canvas 拖拽实现

    Canvas 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏,其中的许多对象会被频繁重绘 SVG 不依赖分辨率 支持事件处理器 ...

  4. 将HTML5 Canvas的内容保存为图片借助toDataURL实现

    将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现,具体实现如下,感兴趣的朋友可以参考下哈,希望对你有所帮助 <html> ...

  5. HTML5之拖拽(兼容IE和非IE)

    前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...

  6. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  7. HTML5 Canvas 小例子 旋转的图片

    <一>CSS部分 @charset "utf-8"; *{ padding:; margin:; outline: none; } #canvas{ position: ...

  8. Ant Design -- 图片可拖拽效果，图片跟随鼠标移动

    Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(pro ...

  9. HTML5 Canvas（实战：绘制饼图2 Tooltip）

    继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框. Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域 ...

随机推荐

  1. on("submit",)

    和$("form").submit(function(){    alert("提交");});都只适用于form表单元素的jquery对象

  2. ImageGrab.grab()全屏抓取错误

    前几天看见知乎上的连连看外挂就想着自己试一下 但是搞了半天发现截取全屏的图片就出现了问题 截取的图片其实只有屏幕左上角的一部分 大概就这样: 用的是PIL  ImageGrab里的grab函数 没加参 ...

  3. 极大既然估计和高斯分布推导最小二乘、LASSO、Ridge回归

    最小二乘法可以从Cost/Loss function角度去想,这是统计(机器)学习里面一个重要概念,一般建立模型就是让loss function最小,而最小二乘法可以认为是 loss function ...

  4. 0001python中特殊的for迭代zip函数

    >>> a = [1,2,3,4,5] >>> b = [9,8,7,6,5] >>> length = len(a) if len(a)< ...

  5. JSON.stringify() 格式化 输出log

    调试程序的过程中,我们打印一个日志: console.log(object);,其中object是任意的一个json对象. 在控制台就会看到[object object],而看不到具体的内容. 我们可 ...

  6. ubuntu/debian ia-libs

    ubuntu 14.04强制安装ia32-libs 1.切换到root权限sudo -i 或 sudo su2.进入apt源列表cd /etc/apt/sources.list.d3.添加ubuntu ...

  7. Intellij Idea常用配置设置

    1.配置Intellij Idea的配置文件从默认c盘转移到其他盘符 找到Intellij idea的安装文件,在bin目录下找到idea.properties配置文件,如下把Idea的配置文件夹和I ...

  8. Mirror--如何在主库上增加文件

    由于各种原因,如磁盘不空不足,需要对主库增加数据库文件到其他磁盘上,而镜像服务器上没有对应盘符,很多人会选择删除镜像,重新完备还原来搭建镜像,这种方式耗时耗力. 在做此类操作时,需要对主服务器和镜像服 ...

  9. android 打开系统相机，

    1.第一步在androidmanifest.xml中注册 <uses-permission android:name="android.permission.WRITE_EXTERNA ...

  10. 读取Linux上图片

    /** * 读取图片 * @param path * @param response * @throws Exception */ public static void showImg(String ...