Javascript 如何在画布中绘制矩形后更新rect的属性？

这是我的功能步骤

当mousedown事件发生时，我将在画布中绘制一个大小为（mousedown.x，mousedown.y，0,0）的矩形

然后启动mousemove，矩形的大小将随着鼠标位置而改变

当鼠标移动发生时，绘图将完成

---

现在，我可以在画布上绘制矩形，但我不知道如何在mousemove时更新矩形的大小。您可能希望在

mousedown

事件期间将初始的

mousedown.x

和

mousedown.y

存储在全局变量中

在

mouseMove

事件期间，您需要检查当前鼠标X是否大于初始鼠标X。如果是，请将矩形的宽度设置为当前X-初始X。否则，您可能需要将矩形的Y设置为当前X，将宽度设置为初始X-当前X

对于y轴也可以这样做

您需要检查当前鼠标Y是否大于初始鼠标Y。如果是，请将矩形的高度设置为当前Y-初始Y。否则，您可能需要将矩形的Y设置为当前Y，将宽度设置为初始Y-当前Y

确保在

mouseMove

事件开始时清除画布或至少清除画布上的上一个图形

要清除整个画布，只需制作一个矩形，其中x和y为0，宽度和高度与画布的宽度和高度相同。确保此矩形使用与画布背景色相同的颜色。在此之后，将正在使用的颜色更改回

rect

应该使用的颜色

要仅清除上一个图形，需要存储最近的

mouseMove

事件的x和y，并在

mouseMove

的开头进行检查，然后使用之前创建rect时使用的相同逻辑创建rect。使用与画布背景色相同的颜色。记住将颜色更改回

rect

之后应该使用的颜色

---

如果希望绘制多个形状，可以将每个形状的x和y以及宽度和高度存储在对象数组中，然后在

mouseMove

事件开始时使用

rect

清除画布后，您可以循环浏览它们并重新绘制它们，然后执行任何进一步的

mouseMove

逻辑。

使用canvas有什么具体原因吗？在这种情况下，SVG将是一个更好的选择。这里有一个例子

var svgns=”http://www.w3.org/2000/svg";
var svg=document.querySelector（'svg'）；
var-rect；
变量x，y；
var宽度；
变异高度；
svg.addEventListener（'mousedown'，函数（e）{
x=e.clientX；
y=e.clientY；
if（！rect）{
rect=document.createElements（svgns，'rect'）；
rect.setAttributeNS（null，'fill'，'#f00'）；
document.getElementById（'svgOne'）.appendChild（rect）；
}
}，假）；
svg.addEventListener（'mousemove'，函数（e）{
宽度=e.clientX-x；
高度=e.clientY-y；
if（rect）{
rect.setAttributeNS（null，'x'，x）；
setAttributeNS矩形（null，'y'，y）；
rect.setAttributeNS（null，'height'，height）；
rect.setAttributeNS（null，'width'，width）；
}
}，假）

我有一个全局数组来存储位置，现在当我移动鼠标时，在每次mouseMove事件之前，它会在canvas@Moishe lipskerb中出现许多矩形，您将需要清除画布或画布上的上一个图形如果我绘制第二个矩形，则在每个
mouseMove
事件开始时，第一个矩形也将清除@Moishe Lipskerno清除上一个矩形，然后将您绘制的颜色更改回您希望用于矩形的颜色