关于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. ibatis sqlmap配置问题 “Check the IBatisNet.DataAccess.DaoSessionHandlers.SqlMapDaoSessionHandler.”

    - The error occurred while configure DaoSessionHandler.- The error occurred in <property name=&qu ...

  2. Java编程思想第四版随书源码官方下载方法

    见不少人在找net.mindview.util.Print,CSDN上有下载,收积分,以下是官网的下载方法,免费: 官网链接:http://mindview.net/ 电子书下载地址:http://w ...

  3. Spring Cloud微服务开发笔记5——Ribbon负载均衡策略规则定制

    上一篇文章单独介绍了Ribbon框架的使用,及其如何实现客户端对服务访问的负载均衡,但只是单独从Ribbon框架实现,没有涉及spring cloud.本文着力介绍Ribbon的负载均衡机制,下一篇文 ...

  4. python数据结构之哈希表

    哈希表(Hash table) 众所周知,HashMap是一个用于存储Key-Value键值对的集合,每一个键值对也叫做Entry.这些个键值对(Entry)分散存储在一个数组当中,这个数组就是Has ...

  5. jeb 下载

    jeb-1.5.201408040(full)_keygen_by_scz(20150725) http://scz.617.cn/ 修改jeb_wincon.bat 中java home 变量,然后 ...

  6. svn冲突的解决

    svn文件冲突的解决 冲突后,会产生三个多余的文件. ①文件名.扩展名.mine 这是你的文件,在你更新你的工作副本之前存在于你的工作副本中--也就是说,没有冲突标志.这个文件 除了你的最新修改外没有 ...

  7. Python Cookbook 笔记--12章并发编程

    <Python Cookbook(第3版)中文版> 1.队列queue的有些方法是线程不安全的,在多线程中最好别用 2.需要限制一段代码的并发访问量时,用信号量.不要把信号量当做普通的锁来 ...

  8. linker command failed with exit code 1 (use -v to see invocation) 变量重名

    有时候,xcode报错看不到,点最后一个按钮,类似气泡的就能看到 报错信息: duplicate symbol _imgNummmm in:    /Users/mianmian/Library/De ...

  9. 火币Huobi API Websocket

    本文介绍火币Huobi API Websocket WebSocket API简介 WebSocket协议是基于TCP的一种新的网络协议.它实现了客户端与服务器之间在单个 tcp 连接上的全双工通信, ...

  10. zkSNARK 零知识验证

    参考文献 ZCash7篇,有社区翻译版,但还是推荐看原汁原味的     https://z.cash/blog/snark-explain.html Vitalik3篇,小天才作者我就不介绍了,这三篇 ...