UDN-企业互联网技术人气社区

板块导航

浏览  : 1038
回复  : 1

[HTML5] Canvas标签的应用-绘制径向渐变图形

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-11 01:07:18 | 显示全部楼层 |阅读模式
    今天我们来学习一下如何绘制径向渐变图形。通过上节课的学习,我们知道绘制线性渐变图形用到了一个非常重要的函数——createLinearGradient();如果我们要绘制径向渐变我们也有类似的方法,如下:

  1. context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd);
复制代码

    xStart:渐变起始点的横坐标
    yStart:渐变起始点的纵坐标
    xEnd:渐变结束点横坐标
    yEnd:渐变结束点纵坐标
    radiusStart:渐变开始圆的半径
    radiusEnd:渐变结束圆的半径

    最后我们通addColorStop方法就可以绘制出非常漂亮的渐变了,他同样也需要设定个0-1之间的浮点数来作为渐变转折点的偏移量。

    整个代码案:
  • 把createLinearGradiend()方法换成createRadialGradient()方法
  • 参数由4个增加到6个
  • addColorStop()偏移量设置,由原来的2个增加到3个


  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5.         <title>HTML5每日一练之Canvas标签的应用-绘制径向渐变图形</title>
  6.         <script type="text/javascript">
  7.         window.onload = function()
  8.         {
  9.                         var canvas = document.getElementById("W3Cfuns_canvas");
  10.                         var context = canvas.getContext("2d");
  11.                         var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400);
  12.                         g1.addColorStop(0.1, "rgb(255, 255, 0)");
  13.                         g1.addColorStop(0.3, "rgb(255, 0, 255)");
  14.                         g1.addColorStop(1, "rgb(0, 255, 255)");
  15.                         context.fillStyle = g1;
  16.                         context.fillRect(0, 0, 400, 300);
  17.                         var n = 0;
  18.                         var g2 = context.createRadialGradient(250, 250, 0, 250, 250, 300);
  19.                         g2.addColorStop(0.1, "rgba(255, 0, 0, 0.5)");
  20.                         g2.addColorStop(0.7, "rgba(255, 255, 0, 0.5)");
  21.                         g2.addColorStop(1, "rgba(0, 0, 255, 0.5)");
  22.                         for(var i = 0; i < 10; i++)
  23.                         {
  24.                                 context.beginPath();
  25.                                 context.fillStyle = g2;
  26.                                 context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
  27.                                 context.closePath();
  28.                                 context.fill();
  29.                         }
  30.                 }
  31.         </script>
  32.     </head>
  33.    
  34.     <body>
  35.             <canvas id="W3Cfuns_canvas" width="600" height="400"></canvas>
  36.     </body>
  37. </html>
复制代码






拓展阅读:


相关帖子

发表于 2015-9-17 15:25:34 来自手机 | 显示全部楼层
不知道大家有没有注意到,html5和云的概念是对应有关联的性的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部