HTML5- Canvas入門（六）

已經第六章了，也差很少接近尾聲，若是你從第一章耐心follow到本章結束，那你便能掌握canvas的大部分知識點（固然若是要精通，仍是得多靠練習，作一些小案例）。

今天咱們要學習的是canvas的變形轉換方法。

縮放方法scale()

在canvas中，若是咱們須要縮放當前繪圖對象，能夠利用 scale() 來實現，其語法爲

ctx.scale( s_width, s_height );

s_width 和 s_height 表示要縮放的寬度或高度的縮放倍數，注意這兩個參數的值再也不是像素值而是縮放倍數，好比1表示不縮放、0.5表示縮小50%、2.3表示放大2.3倍。咱們來個例子：

<canvas id="myCanvas" width="400" height="350" style="border:solid 1px #CCC;">
您的瀏覽器不支持canvas，建議使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.globalAlpha = 0.3;  //設置全局透明度
    ctx.drawImage(img,0,0); 
    ctx.scale(1.2,1.2);
    ctx.drawImage(img,0,0); 
    ctx.scale(1.2,1.2);
    ctx.drawImage(img,0,0); 
}
</script>

注意咱們這裏動用了 ctx.globalAlpha 屬性，它表示全局透明度，其值爲0-1，1表示不透明，0表示完全透明。咱們上方代碼設置全局透明度爲0.3，表示後續繪製出來的任何對象其透明度都只有30%。效果以下：

要注意的一點是，在canvas對當前繪圖對象進行縮放時，其縮放中心點是畫布(0,0)的座標原點。不單單是縮放，後續咱們要介紹的其它變形方法，均是以畫布(0,0)座標點爲變形中心點的。

咱們能夠看下這個例子：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.globalAlpha = 0.5; 
    ctx.drawImage(img,10,10); 
    ctx.scale(2,2);
    ctx.drawImage(img,10,10); 
}

能夠看到，因爲相對畫布左上角的原點作了2倍縮放，故繪製的第二張圖片（即被放大2倍的圖片）距離畫布左上角的距離，是第一張的兩倍距離。

也就是說，第二次的 ctx.drawImage(img,10,10) 中的距離參數也一樣作了放大，實際在畫布上開始繪製的座標變成了(10*2, 10*2)，即(20,20)。

旋轉方法rotate()

咱們能夠經過 rotate() 方法對當前繪製對象進行旋轉，該方法只有一個參數：

ctx.rotate(angle);

參數angle指要旋轉的度數，還記得咱們在第三章提到，度數要使用 Math.PI 爲基準，你能夠把一個 Math.PI 理解爲180度，以下咱們來把一張圖片旋轉30度（1/6*Math.PI）：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.globalAlpha = 0.5; 
    ctx.drawImage(img,10,10); 
    ctx.rotate(1/6*Math.PI);
    ctx.drawImage(img,10,10); 
}

因而圖片會相對畫布左上角原點作順時針30度的旋轉，若是你但願逆時針旋轉，能夠將度數設爲負值，好比 ctx.rotate(-1/6*Math.PI);  

位移方法translate()

在畫布繪製了一個對象後，咱們能夠經過 translate() 方法對畫布座標進行相對X軸或Y軸方向的位移。其語法爲：

ctx.translate( t_x, t_y );

t_x表示在x軸方向上的位移量，t_y表示在y軸方向上的位移量。咱們來個示例：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.globalAlpha = 0.5; 
    ctx.drawImage(img,10,60); 
    ctx.globalAlpha = 1; 
    ctx.translate(50,-30);  //在x軸方向作50px的向右位移，在y軸方向作30px的向上位移
    ctx.drawImage(img,10,60); 
}

能夠看到，新繪製的對象（不透明的圖片）相對第一張圖片（半透明的）在X軸、Y軸方向分別偏移了50px和-30px。

不過咱們介紹 translate() 的時候表示該方法是對畫布座標進行相對X軸或Y軸方向的位移，這個怎麼理解？

上方的代碼裏，兩次drawImage時，其開始繪製的座標都是(10,60)，咱們先試着修改一下，把第二次繪圖代碼改成ctx.drawImage(img,30,30)：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.globalAlpha = 0.5; 
    ctx.drawImage(img,10,60); 
    ctx.globalAlpha = 1; 
    ctx.translate(50,-30); 
    ctx.drawImage(img,30,30); //修改參數，讓開始繪製的座標跟上方的不一樣
}

效果以下：

那麼對於這個效果的理解，咱們能夠看作「畫布的座標系統」在X軸、Y軸方向分別偏移了50px和-30px。來張分析圖加深理解：

變形方法transform()

若是你是一名Transformer（變形金剛）的熱衷者，那麼你對transform這個單詞天然也很瞭解。

在canvas中，咱們能夠對當前繪圖對象進行矩陣變形。咱們先來看一下Adobe Fireworks裏一個實用工具——扭曲工具的效果：

而 transform() 正是實現這種在水平方位或垂直方位作縮放、傾斜、偏移的效果。對應這些效果，它的參數有六個：

ctx.transform(a,b,c,d,e,f);

參數含義以下：

乍一看這參數貌似很混亂，其實否則，它是聽從數學矩陣公式規則的（點此查看詳細）：

其中，x和y是元素最開始的座標，x’ 和y’則是經過矩陣變換後獲得新的座標。經過3×3的變換矩陣，對原先的座標施加變換，就能獲得新的座標了。

咱們來個實例，讓圖片在原位置上縮小一倍、水平傾斜45度、垂直偏移50px：

<canvas id="myCanvas" width="260" height="400" style="border:solid 1px #CCC;">
您的瀏覽器不支持canvas，建議使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.globalAlpha = 0.5;
    ctx.drawImage(img,0,0); 
    ctx.globalAlpha = 1;
    ctx.transform(0.5,1,0,0.5,0,50); //變形
    ctx.drawImage(img,0,0);
}
</script>

注意此處的「水平傾斜45度」，咱們是給參數b賦值1，而不是Math.PI之類的角度值。

在CSS 3中，transform: skew(θx, θy); 就等價於 transform: matrix(tan(θx),0,0,tan(θy),0,0); 而transform()裏的傾斜參數也是至關於 tan(傾斜角度) 計算後的值，因爲 tan(45°)=1 ，故咱們給參數b賦值1來實現水平傾斜45度的效果。

最後要介紹的是 setTransform() 方法，它跟 transform() 有着同樣的參數、實現着同樣的方法，不過 setTransform() 會重置全部曾設置過的變形數值。

怎麼理解 transform() 跟 setTransform() 的區別呢？咱們來看個例子：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.globalAlpha = 0.5;
    ctx.drawImage(img,0,0); 
    ctx.globalAlpha = 1;
    ctx.scale(0.5,0.5);   //縮小至0.5倍
    ctx.transform(0.5,0,0,0.5,0,0); //變形，再要求縮小至0.5倍
    ctx.drawImage(img,0,300);
}

執行後能夠看到，transform() 在原有的縮小了0.5倍的基礎上，又把圖片繼續再縮小0.5倍，也就是畫出來的第二張圖片是第一張的1/4：

咱們把 transform() 換成 setTransform() 試試：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.globalAlpha = 0.5;
    ctx.drawImage(img,0,0); 
    ctx.globalAlpha = 1;
    ctx.scale(0.5,0.5);   //縮小至0.5倍
    ctx.setTransform(0.5,0,0,0.5,0,0); //變形，再要求縮小至0.5倍
    ctx.drawImage(img,0,300);
}

能夠看到 setTransform() 重置了「縮放」效果，即一開始的 scale(0.5,0.5) 效果被pass掉了，你能夠試着把 scale() 改成  scale(3.5,3.5)，但它不會其任何做用。

你也能夠作屢次嘗試，你會發現 setTransform() 會很好地重置、覆蓋掉以前設置過的 scale()、translate()、transform() 變形數值。

本章就介紹到這，共勉~