AxeSlide軟件項目梳理 canvas繪圖系列知識點整理
畫布操作介紹
畫布繪圖的環境通過translate(),scale(),rotate(), setTransform()和transform()來改變，它們會對畫布的變換矩陣產生影響。
| 函數 | 方法 | 描述 |
| translate | dx,dx | 轉換的量的 X 和 Y 大小 |
| scale | sx,sy | 水平和垂直的縮放因子 |
| rotate | angle | 旋轉的量，用弧度表示。正值表示順時針方向旋轉，負值表示逆時針方向旋轉。 |
| setTransform | a,b,c,d,e,f | 水平縮放,水平傾斜(與旋轉有關),垂直傾斜(與旋轉有關，-水平傾斜),垂直縮放,水平移動,垂直移動 |
| transform | a,b,c,d,e,f | 水平縮放,水平傾斜,垂直傾斜,垂直縮放,水平移動,垂直移動 |
translate() 方法爲畫布的變換矩陣添加水平的和垂直的偏移。參數 dx 和 dy 添加給後續定義路徑中的所有點。
scale() 方法爲畫布的當前變換矩陣添加一個縮放變換。縮放通過獨立的水平和垂直縮放因子來完成。例如，傳遞一個值 2.0 和 0.5 將會導致繪圖路徑寬度變爲原來的兩倍，而高度變爲原來的 1/2。指定一個負的 sx 值，會導致 X 座標沿 Y 軸對摺，而指定一個負的sy 會導致 Y 座標沿着 X 軸對摺。
rotate() 方法通過指定一個角度，改變了畫布座標和 Web 瀏覽器中的 <Canvas> 元素的像素之間的映射，使得任意後續繪圖在畫布中都顯示爲旋轉的。它並沒有旋轉 <Canvas> 元素本身。注意，這個角度是用弧度指定的。
setTransform() 會將當前的變換矩陣重置爲單位矩陣，然後構建新的矩陣。
transform() 添加一個新的變換矩陣，再次繪製矩形，調用 transform() 時，它都會在前一個變換矩陣上構建。
具體使用範例
我們在畫布上繪製一個矩形。
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 6 Your browser does not support the HTML5 canvas tag. 7 </canvas> 8 9 <script> 10 11 var c=document.getElementById("myCanvas"); 12 var ctx=c.getContext("2d"); 13 14 ctx.fillStyle="yellow"; 15 ctx.fillRect(0,0,250,100) 16 17 </script> 18 19 </body> 20 </html>
然後畫出的圖形如下圖所示：繪製範圍就是從座標(0,0)開始畫一個寬高分別爲250,100的矩形。
下面對這個矩形進行平移，縮放，旋轉等操作。
1 平移
如果往中間平移的話，我們可以改變它的座標值例如ctx.fillRect(25,25,250,100)，就將矩形起始位置移動到了(25,25)。繪製出的效果如下圖：
另外還有一種方法，我們可以通過context的translate方法移動畫布，來達到同樣的視覺效果。未變換前畫布的原點在左上角，使用translate方法後相當於整個座標系在平移。
注：在操作畫布變換矩陣時，最好在變換前使用save方法保存記錄畫布當前狀態，完成繪製後可以使用restore方法恢復變換前的矩陣狀態。
1 ctx.save(); 2 ctx.translate(25,25); 3 ctx.fillStyle="yellow"; 4 ctx.fillRect(0,0,250,100) 5 ctx.restore();
2 縮放
縮放矩形當然可以通過調整寬高的方式這裏不再舉例說明。
這裏主要介紹通過context的scale方法縮放畫布的方法，通過以下代碼就可以將黃色矩形所縮小到原來的一半（如下圖）。
1 ctx.save(); 2 ctx.scale(0.5,0.5); 3 ctx.fillStyle="yellow"; 4 ctx.fillRect(25,25,250,100); 5 ctx.restore();
3 旋轉
旋轉圖中矩形，就需要把畫布矩陣狀態通過rotate方法變換下了。rotate(Math.PI/6)就是將畫布順時針旋轉30度，畫出的矩形如下圖。
1 ctx.save(); 2 ctx.rotate(Math.PI/6); 3 ctx.fillStyle="yellow"; 4 ctx.fillRect(25,25,250,100) 5 ctx.restore();
4 確定中心點
通過圖可以看出上面的縮放和旋轉都是以畫布左上角爲中心進行的，如果我們需要以畫布中心點爲中心進行變換，需要在rotate和scale方法調用前去修正畫布的座標原點位置到畫布佔位的中心位置ranslate(width/2,height/2)，然後進行縮放變換，之後再用ranslate(-width/2,-height/2)修正座標系。如下代碼：
1 ctx.save(); 2 ctx.translate(width/2,height/2);//將畫布座標系原點移至中心 3 ctx.rotate(0.5,0.5);//如果是縮放，這裏是縮放代碼 4 ctx.translate(-width/2,-height/2);//修正畫布座標系 5 ctx.fillStyle="yellow"; 6 ctx.fillRect(25,25,250,100) 7 ctx.restore();
效果如下圖：
5 設置矩陣
方法setTransform的六個參數上面已經提到，其實可以理解爲縮放、旋轉、移動的複合方法。當您調用 setTransform() 時，它都會重置前一個變換矩陣然後構建新的矩陣，因此在下面的例子中，不會顯示紅色矩形，因爲它在藍色矩形下面。
1 var c=document.getElementById("myCanvas"); 2 var ctx=c.getContext("2d"); 3 4 ctx.fillStyle="yellow"; 5 ctx.fillRect(0,0,250,100) 6 7 ctx.setTransform(1,Math.PI/6,-Math.PI/6,1,30,10);//兩個1代表畫布進行縮放，Math.PI/6表示順時針旋轉30度，(30,10)表示平移 8 ctx.fillStyle="red"; 9 ctx.fillRect(0,0,250,100); 10 11 ctx.setTransform(1,Math.PI/6,-Math.PI/6,1,30,10); 12 ctx.fillStyle="blue"; 13 ctx.fillRect(0,0,250,100);
和setTransform類似的還有一個方法transform()，它們都有六個參數。但是不同的是每次調用 transform() 時，它都會在前一個變換矩陣上構建。如下代碼中先繪製的紅色矩形和上圖的位置是一致的，畫完紅色矩形後，再次調用transform(1,Math.PI/6,-Math.PI/6,1,30,10)改變畫布，這次變換是在當前畫布狀態上變換的所以畫的藍色矩形不會和紅色的重疊。如下圖看上去，紅色和黃色的相對位置 與 藍色和紅色的相對位置 是一樣的。
1 var c=document.getElementById("myCanvas"); 2 var ctx=c.getContext("2d"); 3 4 ctx.fillStyle="yellow"; 5 ctx.fillRect(0,0,250,100) 6 7 ctx.transform(1,Math.PI/6,-Math.PI/6,1,30,10); 8 ctx.fillStyle="red"; 9 ctx.fillRect(0,0,250,100); 10 11 ctx.transform(1,Math.PI/6,-Math.PI/6,1,30,10); 12 ctx.fillStyle="blue"; 13 ctx.fillRect(0,0,250,100);
對canvas繪圖感興趣的，還可以參看此博文 http://www.cnblogs.com/fangsmile/p/5644611.html
