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

板块导航

浏览  : 836
回复  : 1

[HTML5] Canvas标签的应用-绘制向日葵

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-11 00:55:23 | 显示全部楼层 |阅读模式
    使用Canvas绘制向日葵1:
   
  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.                                 
  10.                                 var canvas = document.getElementById("W3Cfuns_canvas");
  11.                                 var context = canvas.getContext("2d");//取得图形上下文 graphics context
  12.                                 var dx = 150;//x坐标
  13.                                 var dy = 150;//y坐标
  14.                                 var s = 100;//图案半径
  15.                                 //圆角外侧的钉
  16.                                 var dig = Math.PI / 15 * 11;
  17.                                 context.fillStyle = "#eee";//填充canvas的背景颜色
  18.                                 context.fillRect(0, 0, 600, 400);//参数分别表示 x轴,y轴,宽度,高度
  19.                                 context.beginPath();//创建路径
  20.                                 context.fillStyle = "rgb(100, 255, 255)";//填充颜色 也可以使用 #900十六进制颜色
  21.                                 context.strokeStyle = "rgb(0, 0, 100)";//线条颜色 也可以使用 #900十六进制颜色
  22.                                 for(var i = 0; i < 30; i++)
  23.                                 {
  24.                                         var x = Math.sin(i * dig);//计算钉的位置x坐标
  25.                                         var y = Math.cos(i * dig);//计算钉的位置y坐标
  26.                                         context.lineTo(dx + x * s, dy + y * s);//画出x - y的图案
  27.                                 }
  28.                                 context.closePath();//关闭路径
  29.                                 context.fill();//填充颜色
  30.                                 context.stroke();//填充线条
  31.                         }
  32.         </script>
  33.     </head>
  34.    
  35.     <body>
  36.             <canvas id="W3Cfuns_canvas" width="600" height="400"></canvas>
  37.     </body>
  38. </html>
复制代码

    使用Canvas绘制向日葵2


    以下绘制方法为“使用Canvas绘制向日葵1”的改进,主要是对线条颜色、填充颜色、以及坐标随机的进行计算。


  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.                                 window.setInterval(function()
  10.                                 {
  11.                                         var canvas = document.getElementById("W3Cfuns_canvas");
  12.                                         var context = canvas.getContext("2d");
  13.                                         var n = 0;
  14.                                         var dx = parseInt(Math.random()*(600 - 0 + 1) + 0);
  15.                                         var dy = parseInt(Math.random()*(400 - 0 + 1) + 0);
  16.                                         var s = parseInt(Math.random()*(300 - 30 + 1) + 30);
  17.                                         var dig = Math.PI / 15 * 11;
  18.                                         context.fillStyle = "#eee";
  19.                                         context.fillRect(0, 0, 600, 400);
  20.                                         context.beginPath();
  21.                                         context.fillStyle = toRGB(parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0));
  22.                                         context.strokeStyle = toRGB(parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0));
  23.                                         for(var i = 0; i < 30; i++)
  24.                                         {
  25.                                                 var x = Math.sin(i * dig);
  26.                                                 var y = Math.cos(i * dig);
  27.                                                 context.lineTo(dx + x * s, dy + y * s);
  28.                                         }
  29.                                         context.closePath();
  30.                                         context.fill();
  31.                                         context.stroke();
  32.                                 },100);//此处为0,表示0毫秒绘画一次,可以设置1000,那么就是1秒画一次
  33.                         }
  34.                         
  35.                         function addZero(string)
  36.                         {
  37.                                 return string.length == 2 ? string : '0' + string;
  38.                         }

  39.                         function toRGB(redValue, greenValue, blueValue)
  40.                         {
  41.                                 var
  42.                                         rgbR = addZero(redValue.toString(16), 2),
  43.                                         rgbG = addZero(greenValue.toString(16), 2),
  44.                                         rgbB = addZero(blueValue.toString(16), 2);
  45.                                        
  46.                                 var rgb = "#" + rgbR + rgbG +rgbB;
  47.                                 return rgb;
  48.                         }
  49.         </script>
  50.     </head>
  51.    
  52.     <body>
  53.             <canvas id="W3Cfuns_canvas" width="600" height="400"></canvas>
  54.     </body>
  55. </html>
复制代码



拓展阅读:









相关帖子

发表于 2015-9-17 15:24:45 | 显示全部楼层
又见楼主分享帖子
使用道具 举报

回复

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

本版积分规则

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