试图在画布上草图一个矩形，最好使用Javascript？

Question

我正在尝试绘制矩形，就像在Paint中一样。But currently when I try to sketch a rectangle, this is what my canvas looks like--double drawings, messy rectangles.

This is what my code looks like

我如何绘制看起来像这样的矩形：like one rectangle?

Answer 1

您发布的代码具有数组：ctx.rect(x[x1],y[y1]但是我的猜测是您正在绘制的不仅仅是矩形...

这里是一个示例：

ctx = document.getElementById('c').getContext('2d');
ctx.lineWidth = 2;
x = [5, 30, 90]
y = [5, 50, 30]

for (i = 0; i < x.length; i++) {
  ctx.rect(x[i], y[i], 50, 20)
}
ctx.stroke();

<canvas height="100" width="300" id="c">

仅是矩形，没有重复的图形或混乱，您提供的代码不应引起任何问题，如图片所示。