关于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如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body,div{ 8 margin:0; 9 padding:0; 10 } 11 #d1{ 12 500px; 13 height: 400px; 14 border: 2px solid #00FFD1; 15 } 16 </style> 17 </head> 18 <body> 19 20 21 <div id="d1"> 22 <canvas id="myCanvas" width="500" height="400"> 23 <p>您的系统不支持此程序!</p> 24 </canvas> 25 </div> 26 27 <script> 28 const canva=document.getElementById("myCanvas"); 29 const cansText=canva.getContext("2d"); 30 31 let img = new Image(); 32 img.src="http://www.w3school.com.cn/i/ct_html5_canvas_circle.gif"; 33 cansText.drawImage(img,50,50,150,100); 34 //在事件外声明需要用到的变量 35 let ax,ay,x,y; 36 37 canva.onmousedown=function (e) { 38 39 canva.onmousemove = function(e){ 40 x= e.clientX;y=e.clientY; 41 42 //限制移动不能超出画布 43 (x<173)? ax=75 : ax=425; 44 (y<148)? ay=50 : ay=350; 45 46 (x < 425 && x >75)? x =e.clientX : x =ax; 47 48 (y > 50 && y <350) ? y=e.clientY : y=ay; 49 50 //先清除之前的然后重新绘制 51 cansText.clearRect(0,0,canva.width,canva.height); 52 53 cansText.drawImage(img,x-75,y-50,150,100); 54 }; 55 56 canva.onmouseup = function(){ 57 canva.onmousemove = null; 58 canva.onmouseup = null; 59 }; 60 } 61 62 </script> 63 </body> 64 </html>
补充：点击图片非中心移动时，会自动跳动到，图片以当前光标为中心
原链：https://blog.csdn.net/freedomVenly/article/details/79042536