canvas教程

HTML5教程:Canvas标签绘制径向渐变图形

字号+ 作者:H5之家 来源:H5之家 2016-11-05 17:00 我要评论( )

HTML5教程:Canvas标签绘制径向渐变图形,我们学习了如何使用Canvas绘制线性渐变图形,今天我们来学习一下如何绘制径向渐变图形。通过上节课的学习,我们知道绘制

 我们学习了如何使用Canvas绘制线性渐变图形,今天我们来学习一下如何绘制径向渐变图形。通过上节课的学习,我们知道绘制线性渐变图形用到了一个非常重要的函数——createLinearGradiend();

如果我们要绘制径向渐变我们也有类似的方法,如下:

  • context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd);
  • xStart:渐变起始点的横坐标
    yStart:渐变起始点的纵坐标
    xEnd:渐变结束点横坐标
    yEnd:渐变结束点纵坐标
    radiusStart:渐变开始圆的半径
    radiusEnd:渐变结束圆的半径
    最后我们通过上节课学习的addColorStop方法就可以绘制出非常漂亮的渐变了,他同样也需要设定个0-1之间的浮点数来作为渐变转折点的偏移量。

    整个代码案例与上节课一样,只不过:

     

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

    相关文章
    • 学习Html5中的canvas元素的文本和路径

      学习Html5中的canvas元素的文本和路径

      2016-11-05 16:00

    • canvas学习笔记:小公式大乐趣

      canvas学习笔记:小公式大乐趣

      2016-11-05 15:00

    • 学习Canvas 画圆锥,并且作为一个统计图

      学习Canvas 画圆锥,并且作为一个统计图

      2016-11-05 14:03

    • Adobe Flash CS5将动画转HTML5 Canvas

      Adobe Flash CS5将动画转HTML5 Canvas

      2016-11-02 13:00

    网友点评
    n