HTML5技术

canvas的beginPath和closePath分析总结,包括多段弧的情况 - 妙音天女(2)

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

例8:在例7的基础上去掉closePath() var context = document.getElementById("myCanvas").getContext('2d');context.fillStyle="#005588";for (var i = 0; i 10; i ++){context.beginPath();context.arc(50 + i*100

例8:在例7的基础上去掉closePath()

var context = document.getElementById("myCanvas").getContext('2d'); context.fillStyle="#005588"; for (var i = 0; i < 10; i ++){ context.beginPath(); context.arc(50 + i*100,60,40,0,2*Math.PI*(i+1)/10); context.closePath(); context.fill(); }

结果:

Paste_Image.png

比较例7和例8可知:
无论是否closePath(),结果都一样。
因为closePath()对于fill()是没有用的:无论是否closePath(),调用fill()时,canvas会自动把没有封闭的路径首尾相连,之后进行填充

posted @

 

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

相关文章
  • 列表总结Canvas和SVG的区别 - 妙音天女

    列表总结Canvas和SVG的区别 - 妙音天女

    2017-03-17 10:00

  • 解决canvas跨域问题(图片,视频资源跨域) - 小结巴巴吧

    解决canvas跨域问题(图片,视频资源跨域) - 小结巴巴吧

    2017-03-08 16:04

  • canvas标签的使用 - Aqiaoba

    canvas标签的使用 - Aqiaoba

    2017-03-02 17:00

  • HTML5动画(二):Canvas 实现圆形进度条并显示数字百分比 - 孟然

    HTML5动画(二):Canvas 实现圆形进度条并显示数字百分比 - 孟然

    2017-02-23 14:05

网友点评
a