scale() 方法縮放當(dāng)前繪圖菱肖，更大或更小舰蟆。
scale()
var c = document.getElementById('mycanvas');
var ctx = c.getContext('2d');
ctx.strokeRect(5,5,25,15);
//context.scale(scalewidth,scaleheight); 1=100%, 0.5=50%, 2=200%, 依次類推
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
retate()方法旋轉(zhuǎn)當(dāng)前的繪圖
retate()
var c2 = document.getElementById('mycanvas2');
var ctx2 = c2.getContext('2d');
//context.rotate(angle);
/*
旋轉(zhuǎn)角度己儒，以弧度計(jì)蓖议。
如需將角度轉(zhuǎn)換為弧度矢否，請使用 degrees*Math.PI/180 公式進(jìn)行計(jì)算腥刹。
舉例：如需旋轉(zhuǎn) 5 度，可規(guī)定下面的公式：5*Math.PI/180宴卖。
*/
ctx2.rotate(20*Math.PI/180);
ctx2.fillRect(20,20,150,100);
translate()方法重新映射畫布上的(0,0)位置
translate()
var c3 = document.getElementById('mycanvas3');
var ctx3 = c3.getContext('2d');
ctx3.fillRect(10,10,50,30);
ctx3.translate(70,70);
ctx3.fillRect(10,10,100,50);
transform()方法替換當(dāng)前的變換矩陣
transform()
var c4 = document.getElementById('mycanvas4');
var ctx4 = c4.getContext('2d');
ctx4.fillStyle = 'yellow';
ctx4.fillRect(0,0,250,120);
ctx4.transform(1,0.5,-0.5,1,30,10);
ctx4.fillStyle = 'red';
ctx4.fillRect(0,0,250,120);
ctx4.transform(1,0.5,-0.5,1,30,10);
ctx4.fillStyle = '#00f';
ctx4.fillRect(0,0,250,120);