帆布内冲程

Question

我研究strokeStyle了一下,但我无法找到如何从内/中/外控制笔划的位置.似乎所有笔划都在我绘制的矩形之外.反正是否使中风成为内心？(甚至以矩形边界为中心)？

谢谢

Answer 1

默认笔划确实使用居中笔划,但遗憾的是没有参数来控制笔划的对齐方式,因此您必须计算矩形位置和大小的偏移值,或者组合两个矩形并使用填充规则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();

做:

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

编辑

对我来说,我相信这是有效的,因为剪辑方法移除了已经存在的填充区域周围的任何填充和描边,这意味着笔划可以进入的唯一位置是在内部,因为否则它将被剪掉.

Answer 3

这个答案“在任何画布形状周围绘制外边框和内边框”展示了如何使用遮罩和合成来精确控制笔画向内和向外的偏移，而无需操作路径。它可以用于任何画布路径，无论多么复杂。