Canvas实现图片拖拽效果-CFANZ编程社区

Canvas实现图片拖拽效果

在前端开发中，一般图片拖拽有两种实现方案，一种是利用onmousemove这个方法在鼠标拖动时获取鼠标的坐标，然后根据坐标修改图片的位置即可，另外一种为利用canvas绘图实现拖拽的效果，当鼠标在移动时获取鼠标的位置，然后不断的清除画布，根据鼠标的位置重新绘制图片。

Canvas实现图片拖拽效果_html

实现代码如下：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Canvas实现图片拖拽效果</title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            background: #ddd;
        }
    </style>
</head>

<body>
    <h1>Canvas实现图片拖拽效果</h1>
    <canvas id="canvas" width="500" height="400">
        您的浏览器不支持Canvas标签！
    </canvas>
    <script>
        var ctx = canvas.getContext('2d');

        var img = new Image();
        img.src = 'images/img.png';

        // 图片加载完成
        img.onload = function () {
            // 要绘制的飞机的位置
            var x = 0; 
            // 要绘制的飞机的位置
            var y = 0;  
            // 监听鼠标在画布上方移动事件
            canvas.onmousemove = function (e) {
                // e.offsetX为事件相对事件源的坐标
                x = e.offsetX - img.width / 2;
                // e.offsetY为事件相对事件源的坐标
                y = e.offsetY - img.height / 2;
                console.log(x, y);
            };
            // 使用定时器，不停的清画布，重绘图片以实现类似拖拽的效果
            setInterval(function () {
                ctx.clearRect(0, 0, 500, 400);
                ctx.drawImage(img, x, y);
            }, 20);
        }
    </script>
</body>

</html>

0 条评论