Html5canvs允許平移和旋轉繪圖，我們來看下面的代碼，：
平移和旋轉
var
ctx;
function init(){
ctx=document.getElementByIdx_x("canvas").getContext("2d");
ctx.fillStyle="rgb(250,0,0)";
ctx.fillRect(50,50,100,200);
ctx.fillStyle="rgb(0,0,250)";
ctx.fillRect(50,50,5,5);
}
http-equiv="Content-Type" content="text/html;
charset=utf-8">
onLoad="init();">
id="canvas" width="400" height="300">
結果如圖所示
我們繪制了一個很大的紅色矩形，左上角坐标(50，50)，另外還在這個矩形上面繪制一個小的藍色正方形，我們是以藍色小正方形所在的左上角為支點旋轉這個大矩形的，逆時針旋轉，我們制定逆時針旋轉30度，編碼為Math.PI/6.
我們修改前面的代碼來完成這個旋轉，我加入了旋轉，然後繪制紅色矩形，再反向旋轉(這點有點奇怪，實際上起到了取消旋轉的作用，回複原來的狀态)，再繪制藍色正方形：
function init(){
ctx=document.getElementByIdx_x("canvas").getContext("2d");
ctx.fillStyle="rgb(250,0,0)";
ctx.rotate(-Math.PI/6);
ctx.fillRect(50,50,100,200);
ctx.fillStyle="rgb(0,0,250)";
ctx.rotate(Math.PI/6);
ctx.fillRect(50,50,5,5);
}
遺憾的是，這并不是我們要的結果，如圖：
為什麼會這樣呢？問題在于旋轉點是在原點(0，0)，而不是紅矩形的左上角。是以哦我們需要先完成一個平移，把旋轉的原點移動到藍色矩形的坐标，以藍色矩形為原點來旋轉，當旋轉完成後再平移回去完成後面的繪圖。畫布上所有的繪制都是基于一個坐标系完成的，我們可以使用
save和restore操作儲存目前的坐标系(即軸的位置和方向)，然後回複到原來的坐标完成後續的工作.代碼如下：
function init(){
ctx=document.getElementByIdx_x("canvas").getContext("2d");
ctx.fillStyle="rgb(250,0,0)";
ctx.save();
ctx.translate(50,50);
ctx.rotate(-Math.PI/6);
ctx.translate(-50,-50);
ctx.fillRect(50,50,100,200);
ctx.restore();
ctx.fillStyle="rgb(0,0,250)";
ctx.fillRect(50,50,5,5);
}
效果如圖：
這樣我們就完成了一個正确的旋轉，rotate方法需要一個弧度機關的角度，負數為逆時針。