canvas transform參數解析

最近正在學習canvas中，今天學到了transform這個方法，6個參數看的腦闊疼，查了一些資料纔算領悟了一些，這篇文章算是用來記錄接下去的一些猜測以及證實猜測的過程。

前言：在本人的概念中，整個canvas畫布就是一個以左上角爲原點的平面直角座標系（不知道的請回顧奇變偶不變.），這樣一來不少概念就比較容易代入理解了。 就是這樣：

官方的參數解釋

1.a 水品縮放

改變x軸的單位長度。解釋：畫布寬度即x軸總長假設爲600px，在默認狀況下單位長度應爲1px，也就是說x軸的長度爲1px（單位長度）*600（長度）=600px（總長度），此時改變a的值即修改x軸單位長度，假如單位長度改成2px，那麼原來有一個矩形若是它的寬度是200單位，也就是200✖1px=200px 可是由於此時單位長度改爲了2px 因而它的現寬度就變成了200✖2px=400px，這樣該矩形就算水平放大（變寬）了

寫個demo

function draw(){
    var canvas = document.getElementById('canvas');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.save(); 
    ctx.fillStyle='Red';
    ctx.fillRect(0, 0, 100, 100);
    ctx.transform(2,0,0,1,0,0);//將參數a的值改成2，其餘默認不變
    ctx.fillStyle='Green';
    ctx.fillRect(100, 100, 100, 100);
}
draw();
複製代碼

結果：

能夠看到綠色矩形，由於x軸的單位長度被改成2，因此它的fill參數變成了（100✖2px，100✖1px，100✖2px，100✖1px）

2.b 水平傾斜 就是x軸傾斜唄，x軸和y軸夾角通常固定爲90度，在設置了傾斜之後，x軸會按照設定值旋轉角度。 寫寫看

function draw(){
    var canvas = document.getElementById('canvas');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.save(); 
    ctx.translate(200, 200);//爲了方便觀察，將原點移到（200，200）的位置
    ctx.beginPath();//開始畫線
    ctx.moveTo(0,0);//將起點移到下面
    ctx.lineTo(100, 0);
    ctx.closePath();
    ctx.strokeStyle='Red';//畫紅線
    ctx.stroke();
    ctx.transform(1,0.5,0,1,0,0);//x軸傾斜
    ctx.beginPath();//開始畫線
    ctx.moveTo(0,0);//將起點移到下面
    ctx.lineTo(200, 0);
    ctx.strokeStyle='Green';//畫綠線
    ctx.closePath();
    ctx.stroke();
}
draw();
複製代碼

結果：

能夠看到綠線（x軸）是按照b的值（0.5）以原點爲定點進行了必定度數的旋轉,至於具體是個什麼關係，通過我修改B的數值來觀察，x軸的傾斜和b參數數值的關係爲：

當b爲正數時，x軸（水平方向）以原點爲定點順時針旋轉角度，角度和b的數值關係式不知道（對不起我數學差），b數值從0到無窮大對應旋轉0-90°，當b=1時，應該是旋轉45°。當b爲負數時，x軸（水平方向）則逆時針旋轉

注：上述結論僅是我的觀察結果，並不許確。有錯望告知，感激不敬！。。忽然想起來這個好像和三角函數的tan45=1有關係啊。。。算了先無論*-*

3.c 垂直縮放請參考1 4.d 垂直傾斜請參考2

5和6就不說了，水平移動即向x軸方向移動e單位，垂直移動即向y軸方向移動f單位，要注意的是水平方向有時候並不必定是3點鐘方向，x軸是會旋轉的 固然垂直方向也同樣。