HTML5 -canvas拖拽、移动绘制图片可操作移动，拖动

关于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             width: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.οnmοusedοwn=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

转载于:https://www.cnblogs.com/7qin/p/9615406.html