如何用canvas绘制虚线区域

Question

如上图所示~需要绘制一个类似地道一样的管道~原本我的思路是设置线条的宽度~直接通过划线实现~但是管道周围还有黄色的虚线~不知如何绘制出来

Answer 1

canvas有画虚线的API ctx.setLineDash() 然后就是用ctx.moveTo（） LineTo等这些API画线就行。黄色，也是一个ctx.strokeStyle = 'yellow'，就OK了。但存在某些低版本浏览器不兼容的情况，而且转角也不会这么平滑。这个时候，就要自己封装一个函数（实线不断间隔绘制的方法）来画了。套用一楼说法，是否可以用图片代替。