HTML5实例教程-用Canvas标签绘制向日葵

本节主要是对之前我们学习的Canvas进行一个小小的复习,没有用到新的技术,唯一用到的就是新的数学算法。

使用Canvas绘制向日葵1:

效果如下图:

使用Canvas绘制向日葵

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

转载请注明:代码家园 » HTML5实例教程-用Canvas标签绘制向日葵

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)