graphics - 减少脂肪中风

Question

我想画这个: 沿着 beizer 路径以相等距离跟随 a 的两条线。粗线是我想要的，小虚线是引导路径。

上图是通过首先描边宽度为 30 的路径，然后使用与背景颜色相同的宽度 25 来完成的。这有时可以正常工作，但如果背景不是纯色则不行。

我想要带有形状的“剪辑”之类的东西。而且我更愿意使用标准图形库来完成它。大多数二维图形 Canvas 中的工具甚至更好。

注意事项:

• 我正在使用 HTML Canvas ，但我认为这对问题来说并不重要。
• 我可以上下平移路径，但这不会让我到各处的中心距离都相同。
• 也许可以用渐变笔触来完成，但我不确定它们是如何工作的。

Answer 1

我可以想办法在 HTML5 Canvas 中做到这一点。

您想要做的是绘制一条曲线 - 在内存中的临时 Canvas 上 - 然后以较小的厚度绘制相同的曲线并设置 globalCompositeOperation到同一 Canvas 上的 destination-out。

这将为您提供所需的形状，基本上是 2 条线，它们之间是透明的。

然后您将该 Canvas 绘制到上面有任何内容(复杂背景等)的真实 Canvas 上。

这是一个例子:

http://jsfiddle.net/at3zR/