javascript - 在绘制矩形之前更改 lineCap 和 lineJoin 没有任何作用？

Question

我有这个代码:

context.lineWidth = 10;

context.lineCap = "square";
context.lineJoin = "square";

context.strokeRect(x, y, w, h);

lineWidth 似乎工作正常，但更改 lineCap 和 lineJoin 没有任何作用。当我将 lineCap 和 lineJoin 设置为 "round" 时，矩形仍然是圆形的。有谁知道这是为什么吗？

Answer 1

这是因为您需要为 lineJoin 使用 miter，因为 square 不是有效值。

Live Demo

The lineJoin attribute defines the type of corners that UAs will place where two lines meet. The three valid values are bevel, round, and miter.

W3 reference

此外，如果您只是在做矩形，则不需要 lineCap