Dan*_*ila 5 html5 canvas border path stroke
我想使用html5画布路径绘制一个具有双线边框的形状.默认笔划(context.stroke())具有单行类型的路径.我可以在原始形状内绘制一个类似的形状,以生成一个看起来像是用两条边框线制作的图形,但我想要一些通用的解决方案.有任何想法吗？
Sim*_*ris 9
有几种方法可以做到这一点.一种简单的方法是绘制一条粗线并"切掉"它的中间部分,留下两个较小的笔划.
你想要做的是绘制任何类型的路径 - 在内存中,临时画布上 - 然后绘制相同的路径,厚度较小,并globalCompositeOperation设置为destination-out在同一画布上.
globalCompositeOperation
destination-out
这将为您提供您想要的形状,基本上是2行,它们之间具有透明度.
然后你将画布绘制到真正的画布上,它上面有任何东西(复杂的背景等).
这是一个例子:
http://jsfiddle.net/uTbsC/
归档时间：
12 年，9 月 前
查看次数：
2885 次
最近记录：