Canvas标签的应用-坐标变换与路径结合使用

  |   0 评论   |   533 浏览

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

    解决思路
     1、必须先另外绘制一个创建路径的函数。
     2、在坐标变幻的同时调用该函数。

     代码案例

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
            <title>HTML5每日一练之Canvas标签的应用-坐标变换与路径结合使用</title>
            <script type="text/javascript">
    			window.onload = function()
    			{
    							createPic();
    			 }
    
    			//创建图形
    			function createPic()
    			{
    					var canvas = document.getElementById("W3Cfuns_canvas");
    					var context = canvas.getContext("2d");
    					context.fillStyle = "#d4d4d4";
    					context.fillRect(0, 0, 400, 300);
    					//绘制图形
    					context.translate(200, 50);
    					for(var i = 0; i < 50; i++)
    					{
    							context.translate(25, 25);
    							context.scale(0.95, 0.95);
    							context.rotate(Math.PI / 8);
    							createStar(context);//此方法专门绘制五角星
    							context.fill();
    					}
    			}
    
    			//创建五角星的方法
    			function createStar(c)
    			{
    					var n = 0;
    					var dx = 100;
    					var dy = 0;
    					var s = 50;
    					var x = Math.sin(0);
    					var y = Math.cos(0);
    					var dig = Math.PI / 5 * 4;
    					//创建路径
    					c.beginPath();
    					c.fillStyle = toRGB(parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0));
    					for(var i = 0; i < 5; i++)
    					{
    							x = Math.sin(i * dig);
    							y = Math.cos(i * dig);
    							c.lineTo(dx + x * s, dy + y * s);
    					}
    					c.closePath();
    			}
    
    			//小于10补零
    			function addZero(string){return string.length == 2 ? string : '0' + string;}
    
    			//随即颜色
    			function toRGB(redValue, greenValue, blueValue)
    			{
    					var
    							rgbR = addZero(redValue.toString(16), 2),
    							rgbG = addZero(greenValue.toString(16), 2),
    							rgbB = addZero(blueValue.toString(16), 2);
    					var rgb = "#" + rgbR + rgbG + rgbB;
    					return rgb;
    			}
    	   </script>
      </head>
    
      <body>
    		<canvas id="W3Cfuns_canvas" width="400" height="300"></canvas>
      </body>
    </html>

    运行代码:

    下载.png

    >