问题
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?
回答1:
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.
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).
Here's an example:
http://jsfiddle.net/uTbsC/
来源：https://stackoverflow.com/questions/13441610/double-line-stroke-in-html5-canvas