在绘制矩形之前更改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

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

<强> Live Demo

  

lineJoin属性定义UAs将在两条线相交的位置放置的角点类型。三个有效值是斜角，圆角和斜角。

<强> W3 reference

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