我有一个画布，我可以在其中使用鼠标绘制矩形。
我希望用户能够在同一画布上绘制多个矩形。在我发现的所有“用鼠标绘制矩形”示例中，您通常会使用 clearRect(0,0,canvas.width,canvas.height) 清除整个画布，但由于我希望能够绘制多个矩形，所以我改变了到 canvas.clearRect(start.x, start.y, end.x-start.x, end.y-start.y)。
问题是，如果你让任何快速的 moes 就像再次在 Windows 95 上一样。矩形没有被正确清除。
您可以在此处查看代码和问题： http://jsfiddle.net/2r5n1rmL/
如您所见，我尝试在 clearrect 中添加一些额外内容，这有点帮助，但还不够
draw.clearRect(start.x-5, start.y-5, w+10, h+10);
我该如何解决？
谢谢
【问题讨论】：
标签： javascript
我也有这个，所以我所做的不是清除那个特定的矩形，而是将所有矩形的位置存储在一个数组中并更新这些单独的位置，并在每次鼠标移动时重新绘制所有这些位置。
var can = document.getElementById("can");
var cont = can.getContext("2d");
var isCon = false;
var shapes = [];
var cur = 0;
cont.canvas.width = window.innerWidth;
cont.canvas.height = window.innerHeight;
function updateFrame() {
shapes.forEach((el) => {
cont.strokeRect(el.x1, el.y1, el.x2 - el.x1, el.y2 - el.y1);
});
}
can.addEventListener("pointerdown", function (e) {
isCon = true;
shapes.push({
x1: e.clientX - can.offsetLeft,
y1: e.clientY - can.offsetTop,
x2: e.clientX - can.offsetLeft,
y2: e.clientY - can.offsetTop,
});
});
can.addEventListener("pointermove", function (e) {
if (isCon) {
cont.clearRect(0, 0, can.width, can.height);
shapes[cur].x2 = e.clientX - can.offsetLeft;
shapes[cur].y2 = e.clientY - can.offsetTop;
requestAnimationFrame(updateFrame);
}
});
can.addEventListener("pointerup", function (e) {
isCon = false;
cur += 1;
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
margin: 0px;
width: 100%;
height: 100%;
}
</style>
</head>
<body id="body">
<canvas id="can"></canvas>
</body>
</html>【讨论】：
首先，绘制一个矩形有一个起点和一个终点。当您单击时，您开始绘制。当您松开鼠标按钮时，绘图停止。
其次，您应该从最小 x 和最小 y 开始绘制一个矩形。所以，我相信你应该有一个标志来知道你是否在画画：
var amIDrawing = false;
然后，您应该将onmousedown 附加到您的画布上，这将是这样的函数：
function mousePressed(e) {
amIDrawing = true;
}
您必须在画布上附加一个onmouseup 进行确认，这将是这样的函数：
function mouseReleased(e) {
amIDrawing = false;
}
最后，您应该将onmousemove 附加到您的画布上，这将是这样的函数：
function mouseMoved(e) {
//Clear previous rectangle if needed
//draw new rectangle
}
请注意，在mousePressed 中，您需要存储坐标，并且您需要将这些坐标与您在移动鼠标时收到的坐标配对，以了解您需要显示哪个新矩形。
【讨论】：
您需要跟踪上次绘制的高度和宽度，并据此清除它，而不是当前的高度和宽度。
有
var lastWidth = 0;
var lastHeight = 0;
你的鼠标移动变为
$("#drawing").mousemove(function(e) {
...
draw.clearRect(start.x-5, start.y-5, lastWidth + 6, lastHeight + 6);
...
draw.rect(start.x, start.y, w, h);
lastWidth = w;
lastHeight = h;
...
小提琴 - http://jsfiddle.net/6vq64sdh/
请注意，当您向上拖动时，您的绘图逻辑有点问题，并且由于您在绘图中提供的额外 +5 偏移量是方向偏差的（当您从左上角绘制矩形时，您不会遇到问题到右下角，但是当你做相反的时候你会遇到问题）
【讨论】：