canvas教程

如何用canvas绘制虚线区域

字号+ 作者:H5之家 来源:H5之家 2017-10-16 09:05 我要评论( )

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

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5 canvas实现圆形时钟代码分享_html5教程技巧

    html5 canvas实现圆形时钟代码分享_html5教程技巧

    2017-10-16 11:02

  • 画出简单的矩形、三角形实例代码

    画出简单的矩形、三角形实例代码

    2017-10-15 13:03

  • 对Canvas和Matrix的理解

    对Canvas和Matrix的理解

    2017-10-15 10:00

  • android浏览器,使用canvas绘制图像重影的解决办法

    android浏览器,使用canvas绘制图像重影的解决办法

    2017-10-14 15:11

网友点评
b