html5画布中的双线笔划
发布于2021-04-10 12:12 阅读(1068) 评论(0) 点赞(10) 收藏(5)
我想使用html5 canvas path绘制具有双线边框的形状。默认笔画（context.stroke（））具有单行路径类型。我可以在原始形状内绘制相似的形状，以生成看起来像是由两条边界线制成的图形，但是我想要某种通用的解决方案。有任何想法吗？
解决方案
有几种方法可以做到这一点。一种简单的方法是画一条粗线，然后在其中部“剪掉”，留下两个较小的笔触。
你想要做的是汲取任何类型的路径-在内存中的，临时的画布上-然后用更小的厚度，并与得出同样的路径globalCompositeOperation设置为destination-out相同的画布上。
这将为您提供所需的形状，它们之间基本上是2条线且具有透明性。
然后，您将该画布绘制到上面有任何内容（复杂背景等）的真实画布上。
这是一个例子：
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/59269/9f33a1c3a122696b40a7/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力