到目前為止，我們已經學會了很多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>