html5画布中的双行笔划 [英] Double line stroke in html5 canvas
问题描述
我想使用 html5画布路径绘制具有双线边框的形状。默认行程（context.stroke（））具有单行类型的路径。我可以在原始形状内绘制一个相似的形状，以生成一个看起来像一个用两条边线构成的图形，但我想要某种类型的通用解决方案。任何想法？
I want to draw a shape that has a double line border using html5 canvas path. The default stroke (context.stroke()) has a single line type of path. I can draw a similar shape inside an original shape to generate a figure that looks like a one made with two border lines, but I want some kind of generic solution. Any ideas?
推荐答案
有几种方法可以做到这一点。一个简单的方法是绘制一条粗线，并剪切它的中间，留下两个较小的笔划。
There are several ways to do this. One simple way would be to draw a fat line and "cut out" the middle of it, leaving two smaller strokes.
你想做什么是绘制任何种类的路径 - 在内存中，临时画布 - 然后绘制相同的路径厚度较小，并将 globalCompositeOperation 设置为<$ c $
What you want to do is draw any kind of path - on an in-memory, temporary canvas - and then draw the same path with less thickness and with the globalCompositeOperation set to destination-out on that same canvas.
这将获得你想要的形状，基本上是两行，它们之间有透明度。
That will get you the shape you want, essentially 2 lines with transparency between them.
然后将该画布绘制到真实的画布上，其上有任何东西（复杂的背景等）。
Then you draw that canvas onto the real canvas that has whatever on it (complex background, etc).
以下是一个示例：
这篇关于html5画布中的双行笔划的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
