Javascript html画布返回行未连接

我试着用一个简单的脚本来创建一个矩形，除了多边形的最后一段没有与第一段正确连接之外，它似乎可以工作。奇怪的是，所有其他的腿都连接正确

在任何人建议我使用内置的drawRect（）或类似函数之前，我应该强调，这只是我试图绘制的一个更复杂图形的简单示例。我只是不明白为什么会这样

newX = 10;
letterHeight = 100;
ctx.strokeStyle = "#999999";
ctx.lineWidth = 6;
ctx.moveTo(newX,letterHeight*0.5);
ctx.lineTo(newX+letterWidth,letterHeight*0.5);
ctx.lineTo(newX+letterWidth,letterHeight);
ctx.lineTo(newX, letterHeight);
ctx.lineTo(newX, letterHeight*0.5);
ctx.stroke();

在我看来，这可能与线宽有关，我可以考虑一些特定的问题来解决这个问题，但如果是这样的话，还有更一般的解决办法吗？

---

使用

ctx.closePath（）恰好在“笔划”命令之前关闭路径。您还应该使用
ctx.beginPath（）启动路径
使用
ctx.closePath（）恰好在“笔划”命令之前关闭路径。您还应该使用
ctx.beginPath（）启动路径
谢谢，我明白了这一点，我接受了你的答案，但如果我画两个图形，其中一个是开放的（如字母“U”），而另一个图形是封闭的（如矩形），该怎么办。如何绘制这两个图形，使它们的基础处于相同的视觉水平。如果希望其中一个关闭，另一个打开，请不要为打开的图形包含closePath命令。您必须为每个形状添加一个单独的笔划命令。我知道closePath只能用于关闭路径，但问题是，如果一条路径关闭，而另一条路径未关闭，则以编程方式绘制两条相同长度的线会以可视方式呈现两条不同长度的线。我可以想出一个粗略的解决方案，但我想知道是否有一个更具原则性的方法。无论如何，谢谢：）如果您得到的是不同的尺寸，请确保开口线的封口正确
ctx。lineCap（“butt”）
将确保线的长度正确，将封口设置为“圆形”或“方形”将使线的每一端增加一半的线宽，使其更长。另外，
ctx.lineJoin（）
、
ctx.miterLimit（）
和
ctx.lineWidth（）
也会影响笔划的显示方式。有关更多信息，Oops my bad它们不是函数，它们是属性
ctx.lineCap=“butt”
not
ctx.lineCap（“butt”）其他代码相同。。对不起，谢谢，我明白了，我已经接受了你的答案，但是如果我画两个图形，其中一个是开放的（像字母“U”），而另一个是封闭的（像矩形）。如何绘制这两个图形，使它们的基础处于相同的视觉水平。如果希望其中一个关闭，另一个打开，请不要为打开的图形包含closePath命令。您必须为每个形状添加一个单独的笔划命令。我知道closePath只能用于关闭路径，但问题是，如果一条路径关闭，而另一条路径未关闭，则以编程方式绘制两条相同长度的线会以可视方式呈现两条不同长度的线。我可以想出一个粗略的解决方案，但我想知道是否有一个更具原则性的方法。无论如何，谢谢：）如果您得到的是不同的尺寸，请确保开口线的封口正确
ctx。lineCap（“butt”）
将确保线的长度正确，将封口设置为“圆形”或“方形”将使线的每一端增加一半的线宽，使其更长。另外，
ctx.lineJoin（）
、
ctx.miterLimit（）
和
ctx.lineWidth（）
也会影响笔划的显示方式。有关更多信息，Oops my bad它们不是函数，它们是属性
ctx.lineCap=“butt”
not
ctx.lineCap（“butt”）其他代码相同。。对不起，今天。。