Question

我稍微研究了strokeStyle，但我无法找到如何从内/中/外控制笔画的位置。似乎所有笔划都在我绘制的矩形之外。反正是否使中风成为内心？（或者甚至以矩形边界为中心）？

由于

Answer 1

默认笔划确实使用居中笔划，但遗憾的是没有参数来控制笔划的对齐方式，因此您必须计算矩形位置和大小的偏移值，或者组合两个矩形并使用例如填充-rule evenodd：

var ctx = c.getContext("2d");

// default centered
ctx.lineWidth = 10;
ctx.strokeRect(10, 10, 100, 100);

ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.strokeRect(10, 10, 100, 100);         // show main path

// inner
ctx.rect(150, 10, 100, 100);
ctx.rect(150+10, 10+10, 100-20, 100-20);  // offset position and size
ctx.fill("evenodd");                      // !important
ctx.strokeRect(150, 10, 100, 100);

<canvas id=c></canvas>

Answer 2

希望这有帮助！

而不是：

ctx.fill();
ctx.stroke();

<强> DO ：

ctx.save();
ctx.clip();
ctx.lineWidth *= 2;
ctx.fill();
ctx.stroke();
ctx.restore();

修改

对我来说，我相信这是有效的，因为剪辑方法会移除任何填充并在已经存在的填充区域周围划动，这意味着笔划可以进入的唯一位置是在内部，因为否则会被剪切关闭。

Answer 3

这个答案“Draw outer and inner border around any canvas shape”显示了如何使用遮罩和合成来精确控制笔划的内部和外部偏移，而无需操纵路径。无论多么复杂，它都可以用于任何画布路径。

帆布内冲程

3 个答案: