HTML5教程实例-Canvas标签-坐标变换与路径结合使用

到目前为止,我们已经学会了很多Canvas的绘制方法,如果我们要绘制如下图的图形怎么办呢?

我们需要对矩形变形,使用坐标变换就足够了。但是对使用路径绘制出来的图形进行变幻的时候,那么要考虑的事情就 多了。因为使用坐标变换之后,已经创建好的路径就不可用了。必须要重新创建路径,重新创建路径后,坐标变换方法又失效了。

解决思路

1、必须先另外绘制一个创建路径的函数。

2、在坐标变幻的同时调用该函数。

  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.                         createPic(); 
  10.                 } 
  11.                  
  12.                 //创建图形 
  13.                 function createPic() 
  14.                 { 
  15.                         var canvas = document.getElementById("W3Cfuns_canvas"); 
  16.                         var context = canvas.getContext("2d"); 
  17.                         context.fillStyle = "#d4d4d4"
  18.                         context.fillRect(0, 0, 400, 300); 
  19.                         //绘制图形 
  20.                         context.translate(200, 50); 
  21.                         for(var i = 0; i < 50; i++) 
  22.                         { 
  23.                                 context.translate(25, 25); 
  24.                                 context.scale(0.95, 0.95); 
  25.                                 context.rotate(Math.PI / 8); 
  26.                                 createStar(context);//此方法专门绘制五角星 
  27.                                 context.fill(); 
  28.                         } 
  29.                 } 
  30.                  
  31.                 //创建五角星的方法 
  32.                 function createStar(c) 
  33.                 { 
  34.                         var n = 0
  35.                         var dx = 100
  36.                         var dy = 0
  37.                         var s = 50
  38.                         var x = Math.sin(0); 
  39.                         var y = Math.cos(0); 
  40.                         var dig = Math.PI / 5 * 4; 
  41.                         //创建路径 
  42.                         c.beginPath(); 
  43.                         c.fillStyle = toRGB(parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0)); 
  44.                         for(var i = 0; i < 5; i++) 
  45.                         { 
  46.                                 x = Math.sin(i * dig); 
  47.                                 y = Math.cos(i * dig); 
  48.                                 c.lineTo(dx + x * s, dy + y * s); 
  49.                         } 
  50.                         c.closePath(); 
  51.                 } 
  52.                  
  53.                 //小于10补零 
  54.                 function addZero(string){return string.length == 2 ? string : '0' + string;} 
  55.                  
  56.                 //随即颜色 
  57.                 function toRGB(redValue, greenValue, blueValue) 
  58.                 { 
  59.                         var  
  60.                                 rgbR = addZero(redValue.toString(16), 2), 
  61.                                 rgbG = addZero(greenValue.toString(16), 2), 
  62.                                 rgbB = addZero(blueValue.toString(16), 2); 
  63.                         var rgb = "#" + rgbR + rgbG + rgbB; 
  64.                         return rgb; 
  65.                 } 
  66.         </script> 
  67.     </head> 
  68.      
  69.     <body> 
  70.             <canvas id="W3Cfuns_canvas" width="400" height="300"></canvas> 
  71.     </body> 
  72. </html> 

转载请注明:代码家园 » HTML5教程实例-Canvas标签-坐标变换与路径结合使用

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