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

￡神魔★判官ぃ 2022-06-02 11:50 230阅读 0赞

#### 关于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="cat.png";
    
        img.onload=function () {
            cansText.drawImage(img,50,50);   //在画布X轴 50  Y轴坐标50 处添加一张图片
        };
    
        //在事件外声明需要用到的变量
        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>

--------------------

## 效果图：\#\# ##

做成动态图目测有点阴影， 实际页面是没有的哦！

![在这里插入图片描述][20200118094640411.gif]

DEMO下载 ： https://github.com/vvenly/canvasDemo.git

关于图片 及 canvas 可参考： https://blog.csdn.net/freedomvenly/category\_7397512.html

[20200118094640411.gif]: /images/20220602/cc968fa96e744019b1c5df53de0dbb35.png