Html5 canvas學習5-圖形變形：縮放 旋轉 平移 變形
在canvas對當前繪圖物件進行變形時，其中心點是畫布(0,0)的座標原點。
1.縮放
縮放context.scale(x,y)
x:x座標軸按x比例縮放 y:y座標軸按y比例縮放
比如1表示不縮放、0.5表示縮小50%、2.3表示放大2.3倍。
1
2
3
例子：
<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,10,10);
ctx.scale(2,2);
ctx.drawImage(img,10,10);
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
這裡寫圖片描述
注意
- ctx.globalAlpha 屬性：設定全域性透明度：0-1
- 第二次的 ctx.drawImage(img,10,10) 中的距離引數也同樣做了放大，實際在畫布上開始繪製的座標變成了(10*2, 10*2)，即(20,20)。
2.旋轉
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);
}
1
2
3
4
5
6
7
8
9
10
3.平移
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);
}
1
2
3
4
5
6
7
8
9
10
11
這裡寫圖片描述
上方的程式碼裡，兩次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); //修改引數，讓開始繪製的座標跟上方的不同
}
1
2
3
4
5
6
7
8
9
10
11
這裡寫圖片描述
那麼對於這個效果的理解，我們可以看做“畫布的座標系統”在X軸、Y軸方向分別偏移了50px和-30px。
4.變形
ctx.transform(a,b,c,d,e,f);
這裡寫圖片描述
x和y是元素最開始的座標，x’ 和y’則是通過矩陣變換後得到新的座標。通過3×3的變換矩陣，對原先的座標施加變換，就能得到新的座標了。
我們來個例項，讓圖片在原位置上縮小一倍、水平傾斜45度、垂直偏移50px：
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
這裡寫圖片描述
注意此處的“水平傾斜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);
}
1
2
3
4
5
6
7
8
9
10
11
12
這裡寫圖片描述
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);
}
1
2
3
4
5
6
7
8
9
10
11
12
這裡寫圖片描述
可以看到 setTransform() 重置了“縮放”效果，即一開始的 scale(0.5,0.5) 效果被pass掉了，你可以試著把 scale() 改為 scale(3.5,3.5)，但它不會其任何作用。
你也可以做多次嘗試，你會發現 setTransform() 會很好地重置、覆蓋掉之前設定過的 scale()、translate()、transform() 變形數值。
參考：http://www.cnblogs.com/vajoy/p/4001606.html
http://www.runoob.com/html/html5-canvas.html
---------------------
作者：5big
來源：CSDN
原文：https://blog.csdn.net/u012426959/article/details/78859601
版權宣告：本文為博主原創文章，轉載請附上博文連結！