Canvas 画布上的互动矩形：拖动和缩放的实现艺术
2023-11-07 14:26:41
Canvas API 为网页开发者提供了通过 JavaScript 和 HTML 的
首先，我们从获取 Canvas 元素的上下文对象开始。这个神奇的 ctx 变量是我们与 Canvas 元素对话的桥梁，它让我们能够绘制出各种各样的图形。接下来，我们创建一个矩形对象，使用 ctx.fillRect() 方法，为它穿上闪耀的色彩。
为了实现拖动，我们需要监听鼠标事件。当鼠标在矩形上按下时，我们会记录下鼠标的坐标，并在后续的鼠标移动事件中，计算出矩形应该移动的距离，并更新它的位置。
缩放功能的实现也很巧妙。在鼠标悬停在矩形边缘时，我们会改变鼠标光标的形状，提示用户可以进行缩放操作。当鼠标按下时，我们会记录下鼠标的坐标和矩形的尺寸，并在后续的鼠标移动事件中，计算出矩形的缩放比例，并更新它的尺寸。
整个过程环环相扣，妙趣横生。矩形在画布上翩翩起舞，跟随鼠标的指挥，时而挪动脚步，时而改变身姿。这种互动不仅让 Canvas 元素更加生动活泼，也为网页增添了一抹灵动的气息。
现在，让我们深入代码的细节，从获取 Canvas 元素的上下文对象开始：
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
接下来，我们创建一个矩形对象，并用 ctx.fillRect() 方法为它填充颜色：
const rectangle = {
x: 100,
y: 100,
width: 100,
height: 100,
color: "red"
};
ctx.fillStyle = rectangle.color;
ctx.fillRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
为了实现拖动，我们需要监听鼠标事件。当鼠标在矩形上按下时，我们会记录下鼠标的坐标：
canvas.addEventListener("mousedown", (event) => {
if (isInsideRectangle(event.clientX, event.clientY, rectangle)) {
isDragging = true;
dragOffsetX = event.clientX - rectangle.x;
dragOffsetY = event.clientY - rectangle.y;
}
});
在后续的鼠标移动事件中，我们计算出矩形应该移动的距离，并更新它的位置：
canvas.addEventListener("mousemove", (event) => {
if (isDragging) {
rectangle.x = event.clientX - dragOffsetX;
rectangle.y = event.clientY - dragOffsetY;
}
});
缩放功能的实现也十分巧妙。在鼠标悬停在矩形边缘时，我们会改变鼠标光标的形状，提示用户可以进行缩放操作：
canvas.addEventListener("mousemove", (event) => {
if (isNearEdge(event.clientX, event.clientY, rectangle)) {
document.body.style.cursor = "nwse-resize";
} else {
document.body.style.cursor = "default";
}
});
当鼠标按下时，我们会记录下鼠标的坐标和矩形的尺寸：
canvas.addEventListener("mousedown", (event) => {
if (isNearEdge(event.clientX, event.clientY, rectangle)) {
isResizing = true;
resizeOffsetX = event.clientX - rectangle.x;
resizeOffsetY = event.clientY - rectangle.y;
originalWidth = rectangle.width;
originalHeight = rectangle.height;
}
});
在后续的鼠标移动事件中，我们计算出矩形的缩放比例，并更新它的尺寸：
canvas.addEventListener("mousemove", (event) => {
if (isResizing) {
rectangle.width = originalWidth + (event.clientX - resizeOffsetX);
rectangle.height = originalHeight + (event.clientY - resizeOffsetY);
}
});
整个过程环环相扣，美妙绝伦。矩形在画布上翩翩起舞，跟随鼠标的指挥，时而挪动脚步，时而改变身姿。这种互动不仅让 Canvas 元素更加生动活泼，也为网页增添了一抹灵动的气息。
