html - html5画布中的双线描边

Question

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

score 9 · Accepted Answer

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

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

这会给你你想要的形状，基本上是两条线，它们之间是透明的。

然后将该画布绘制到上面有任何东西（复杂背景等）的真实画布上。

这是一个例子：

1 回答 1