如何用canvas绘制虚线区域

Question

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

Answer 1

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

Answer 2

管道用图片不就完了吗

Answer 3

用css也可以实现的

border: dotted yellow 1px;
border-radius: 20；