1.縮放
cxt.scale(2,2);
縮放的是整個畫布腋寨，縮放后，繼續(xù)繪制的圖形會被放大或縮小化焕。
<script type="text/javascript">
var canvas = document.getElementById("con");
//獲取上下文
var cxt = canvas.getContext("2d");
cxt.rect(0,0,100,100);
cxt.fillStyle = "red";
//縮放
cxt.scale(2,2);
//放大一倍,不僅僅是寬度和高度,其x,y也會跟著放大
cxt.fillStyle = "blue";
cxt.rect(100,100,100,100);
//還原 縮小原來的一倍
cxt.scale(0.5,0.5);
cxt.fill();
</script>
image
2.位移
ctx.translate(x,y) 方法重新映射畫布上的 (0,0) 位置
x： 添加到水平坐標(biāo)（x）上的值
y： 添加到垂直坐標(biāo)（y）上的值
發(fā)生位移后萄窜，相當(dāng)于把畫布的0,0坐標(biāo) 更換到新的x,y的位置，所有繪制的新元素都被影響撒桨。
位移畫布一般配合縮放和旋轉(zhuǎn)等查刻。
<script type="text/javascript">
var canvas = document.getElementById("con");
//獲取上下文
var cxt = canvas.getContext("2d");
cxt.fillStyle = "red";
cxt.fillRect(0,0,200,100);
//位移 對之前的操作 沒有影響
cxt.translate(100,100);
cxt.fillStyle = "blue";
cxt.fillRect(100,100,200,100);
</script>
image
3.旋轉(zhuǎn)
context.rotate(angle); 方法旋轉(zhuǎn)當(dāng)前的繪圖
注意參數(shù)是弧度（PI）
如需將角度轉(zhuǎn)換為弧度，請使用 degrees*Math.PI/180 公式進行計算凤类。
<script type="text/javascript">
var canvas = document.getElementById("con");
//獲取上下文
var cxt = canvas.getContext("2d");
cxt.fillStyle = "red";
cxt.fillRect(100,100,200,100);
cxt.rotate(20 * Math.PI/180);
cxt.fillStyle = "blue";
cxt.fillRect(100,100,200,100);
</script>
image
