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

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

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

 代码案例

    
        
        HTML5每日一练之Canvas标签的应用-坐标变换与路径结合使用
        
			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>
​
  
  

<canvas id="W3Cfuns_canvas" width="400" height="300">

  

运行代码：