我想使用html5画布路径绘制一个具有双线边框的形状。默认的描边（context.stroke()）具有单线类型的路径。我可以在原始形状内部绘制类似的形状，以生成看起来像使用两个边框线制作的图形，但我想要一些通用的解决方案。有什么想法吗？
1个回答
10
有几种方法可以做到这一点。一个简单的方法是画一条粗线并“切掉”它的中间，留下两个较小的线条。
您需要做的是在内存临时画布上绘制任何类型的路径，然后在同一画布上以较小的厚度绘制相同的路径，并将globalCompositeOperation设置为destination-out。
这将为您获得所需的形状，基本上是两条之间透明的线条。
然后，您将该画布绘制到具有任何内容（复杂背景等）的真实画布上。
以下是一个示例：
您需要做的是在内存临时画布上绘制任何类型的路径，然后在同一画布上以较小的厚度绘制相同的路径，并将globalCompositeOperation设置为destination-out。
这将为您获得所需的形状，基本上是两条之间透明的线条。
然后，您将该画布绘制到具有任何内容（复杂背景等）的真实画布上。
以下是一个示例：
- Simon Sarris
1
1好主意！我本来想建议画一次然后稍微调整大小，但那样会模糊。你的解决方案可以产生清晰的线条。我想没有更好的方法了。 - naugtur
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接