下面我們來看下在canvas上繪制圖像的另一種方式——變換(translate函數的應用）：
下面的代碼：我們還是實現上篇文章的效果：畫一條斜線。理論上的知識，自己買書去看吧！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>轉換</title>
<style type="text/css">
#diagonal
{
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
function drawDiagonal() {
//取得canvas元素及其繪圖上下文
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//保存當前繪畫狀態，以便我們畫完這副畫以后，再恢復到這個狀態，畫另一副畫。
context.save();
//向右下方移動繪圖上下文
context.translate(70, 140);
//以原點為起點，繪制與前面相同的線段
context.beginPath();
context.moveTo(0, 0);
context.lineTo(70, -70);
//將這條線繪制到canvas畫布上去。
context.stroke();
//恢復原有的繪圖狀態
context.restore();
//可以開始另外一副繪圖。。。。。。
}
window.addEventListener("load", drawDiagonal, true);
</script>
</head>
<body>
<canvas id="diagonal">
</canvas>
</body>
</html>
（請注意加紅色背景的字）
1、首先通過ID找到並訪問canvas對象。
2、接着通過調用canvas對象的getContext函數獲取上下文對象。
3、接下來，保存尚未修改的context對象，這樣我們即使通過moveTo、lineTo、translate等操作后，我們還是可以恢復到這個狀態，然后開始繪畫另一個副圖，或者另外一些操作。
4、下一步是在context中調用translate函數。通過這個操作，當進行平移行為(moveTo)發生時，我們的提供的變換坐標｛translate(70,140)｝會被加到結果坐標｛moveTo(0,0)｝上去，結果移動到了坐標點(70,140){即橫向：70，縱向：140}(我們暫時稱坐標A吧)上面了。
5、上一步完成后，我們調用lineTo(70，-70)，意思是在上一個坐標點(70,140)上橫向加70(70+70=140)，縱向減70(140-70=70)，於是我們得一點(140，70)(我們暫時稱為坐標B吧),得到兩個坐標點后，lineTo方法告訴我們用一條直線把A、B這兩個坐標點連起來。
其它上篇已介紹過，就不多說了。如果覺得我理解錯了，希望你能幫我指出來。在這里我還要向 artwl 表示感謝，他對我上某篇文章寫的不好處的賜教。真心希望大家能賜教。。。。