关于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. Windows Server 2008 R2之五操作主控的管理

    一.概述 操作主控(FSMO)也称作操作主机(OM),它是指在AD中一个或多个特殊的DC,用来执行某些特殊的功能(资源标识符SID分配.架构修改.PDC选择等). 1.操作主控的分类 基于森林的操作主 ...

  2. poj3259 Wormholes【最短路-bellman-负环】

    While exploring his many farms, Farmer John has discovered a number of amazing wormholes. A wormhole ...

  3. HDU 6343 - Problem L. Graph Theory Homework - [(伪装成图论题的)简单数学题]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6343 Time Limit: 2000/1000 MS (Java/Others) Memory Li ...

  4. mysql union出错: "Every derived table must have its own alias"

    SELECT count(*) from (SELECT province_code as area_id, count(*) from t_cas_rural_selected GROUP BY p ...

  5. noip做题记录+挑战一句话题解?

    因为灵巧实在太弱辽不得不做点noip续下命QQAQQQ 2018 积木大赛/铺设道路 傻逼原题? 然后傻逼的我居然检查了半天是不是有陷阱最后花了差不多一个小时才做掉我做过的原题...真的傻逼了我:( ...

  6. hibernate注解（一）JoinColumn

    @Entity @Table(name="t_group") public class Group { private int id; private String name; p ...

  7. 【剑指offer】合并两个排序的链表

    一.题目: 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 二.思路: 递归思想,首先判断一方为空的情况,一方为空则直接返回另一方.都不为空时,首先找到表 ...

  8. HDU Today(自己的代码不知道哪里错了一直没A抄袭大神的)

    http://acm.hdu.edu.cn/showproblem.php?pid=2112 本题题目意思非常简单,麻烦的就是处理一下字符串,这是我能力欠缺的地方 ;} 先把我有乱有麻烦的错误代码贴上 ...

  9. end=‘’

    print('----------------') a = ['aa','bb','cc','dd','ee'] for i in range(len(a)): print(i,a[i])#默认换行 ...

  10. QC质量管理七大手法

    1.层别法 层别法就是将大量有关某一特定主题的观点.意见或想法按组分类,将收集到的大量的数据或资料按相互关系进行分组,加以层别.层别法一般和柏拉图.直方图等其它七大手法结合使用,也可单独使用. 2.查 ...