html - html5 Canvas 中的双线描边

Question

我想使用 html5 Canvas 路径 绘制一个具有双线边框的形状。默认笔划 (context.stroke()) 具有单线类型的路径。我可以在原始形状内绘制一个相似的形状来生成一个看起来像由两条边界线组成的图形，但我想要某种通用的解决方案。有什么想法吗？

Answer 1

有几种方法可以做到这一点。一种简单的方法是画一条粗线并“切掉”它的中间，留下两个较小的笔画。

您想要做的是绘制任何类型的路径 - 在内存中的临时 Canvas 上 - 然后绘制厚度较小的相同路径并使用 globalCompositeOperation 在同一 Canvas 上设置为 destination-out。

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

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

这是一个例子:

http://jsfiddle.net/uTbsC/