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

最新推荐文章于 2025-06-23 17:49:05 发布

原创最新推荐文章于 2025-06-23 17:49:05 发布 · 4.1w 阅读

38 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #html5 #绘图

canvas 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas实现实时图片拖拽的方法。通过JavaScript监听鼠标事件，在画布上实现图片跟随鼠标移动的效果，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于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>