canvas 绘图 实现拖拉拽
时间: 2023-12-09 17:34:57 浏览: 41
以下是使用原生JavaScript实现Canvas绘图拖拽的示例代码:
```javascript
// 获取Canvas元素
var canvas = document.getElementById('myCanvas');
// 获取Canvas上下文
var ctx = canvas.getContext('2d');
// 定义一个矩形对象
var rect = {
x: 50,
y: 50,
width: 100,
height: 100,
isDragging: false
};
// 绘制矩形
function drawRect() {
ctx.beginPath();
ctx.rect(rect.x, rect.y, rect.width, rect.height);
ctx.fillStyle = '#0095DD';
ctx.fill();
ctx.closePath();
}
// 监听鼠标按下事件
canvas.addEventListener('mousedown', function(e) {
var mouseX = e.clientX - canvas.offsetLeft;
var mouseY = e.clientY - canvas.offsetTop;
// 判断鼠标是否在矩形内部
if (mouseX >= rect.x && mouseX <= rect.x + rect.width && mouseY >= rect.y && mouseY <= rect.y + rect.height) {
rect.isDragging = true;
}
});
// 监听鼠标移动事件
canvas.addEventListener('mousemove', function(e) {
if (rect.isDragging) {
rect.x = e.clientX - canvas.offsetLeft - rect.width / 2;
rect.y = e.clientY - canvas.offsetTop - rect.height / 2;
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重新绘制矩形
drawRect();
}
});
// 监听鼠标松开事件
canvas.addEventListener('mouseup', function(e) {
rect.isDragging = false;
});
// 绘制矩形
drawRect();
```
以上代码实现了一个简单的Canvas矩形拖拽功能。当鼠标按下时,判断鼠标是否在矩形内部,如果是,则将矩形的isDragging属性设置为true,表示正在被拖拽。当鼠标移动时,如果矩形正在被拖拽,则根据鼠标的位置重新设置矩形的坐标,并清空画布,重新绘制矩形。当鼠标松开时,将矩形的isDragging属性设置为false,表示拖拽结束。