canvas transform引數解析

Finyu發表於2019-01-22
CanvasORM

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

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

canvas transform引數解析

官方的引數解釋

canvas transform引數解析

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();
複製程式碼

結果：

canvas transform引數解析
可以看到綠色矩形，因為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();
複製程式碼

結果：

canvas transform引數解析

可以看到綠線（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軸是會旋轉的 當然垂直方向也一樣。

相關文章