H5 画布（canvas）的使用、元素的拖拽
<!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来监听鼠标事件，并在相应的事件处理函数中更新矩形位置和重绘画布。这是一个基本的拖拽示例，但不包括边界检查或更复杂的交互逻辑。
评论已关闭