首页 > 编程 > HTML > 正文

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

2024-08-26 00:17:02
字体:
来源:转载
供稿:网友

武林网(www.vevb.com)文章简介:HTML5每日一练之Canvas标签的应用-绘制径向渐变图形.

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

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

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

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

    发表评论 共有条评论
    用户名: 密码:
    验证码: 匿名发表