H5 画布（canvas）的使用、元素的拖拽

作者：System 时间：2024年08月15日分类：所有,html5 字数：1644

这篇文章距离上次修改已过191天，其中的内容可能已经有所变动。




<!DOCTYPE html>
<html>
<head>
    <title>Canvas 拖拽元素示例</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        var dragging = false;
        var rect = {
            x: 100,
            y: 100,
            width: 100,
            height: 100
        };
 
        function drawRect() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.rect(rect.x, rect.y, rect.width, rect.height);
            ctx.fillStyle = 'blue';
            ctx.fill();
            ctx.stroke();
        }
 
        canvas.addEventListener('mousedown', function(e) {
            var x = e.offsetX;
            var y = e.offsetY;
            if (x > rect.x && y > rect.y &&
                x < rect.x + rect.width && y < rect.y + rect.height) {
                dragging = true;
            }
        });
 
        canvas.addEventListener('mouseup', function() {
            dragging = false;
        });
 
        canvas.addEventListener('mousemove', function(e) {
            if (dragging) {
                rect.x = e.offsetX - rect.width / 2;
                rect.y = e.offsetY - rect.height / 2;
                drawRect();
            }
        });
 
        drawRect();
    </script>
</body>
</html>

这段代码创建了一个简单的画布，并在其中绘制了一个蓝色的矩形。通过鼠标拖拽矩形的任意位置，可以移动这个矩形。代码中使用了addEventListener来监听鼠标事件，并在相应的事件处理函数中更新矩形位置和重绘画布。这是一个基本的拖拽示例，但不包括边界检查或更复杂的交互逻辑。

H5 画布（canvas）的使用、元素的拖拽

评论已关闭

推荐阅读