標籤：
Context對象可以通過調用translate()方法來移動Canvas畫布中座標原點的位置。translate()方法的原型如下：
void translate(x, y);
用於將該Context對象所對應的Canvas的(0, 0)點移動到(x, y)點，並將其作為新的(0, 0)點。通過實驗表明，translate()方法是通過把當前(0, 0)點設定為(-x, -y)點來實現這種移動的，並且改變後座標原點將會影響由該Canvas對象產生的其它Context對象。但是，與Canvas中其它操縱映像的方法一樣，translate()也只會影響移動後繪製的圖形，對已經繪製到畫布中的圖形無效。
下面的樣本展示了移動的效果：
[html] view plaincopy
- <!DOCTYPE HTML>
- <html>
- <body>
- <canvas id="canvas" width="600"height="400">
- <p>Your browserdoes not support the canvas element!</p>
- </canvas>
-
- <script type="text/javascript">
- var canvas =document.getElementById("canvas");
- var context2D =canvas.getContext("2d");
- var pic = new Image();
- pic.src ="milaoshu.jpg"; //注意目錄結構，這裡是把圖片和html放在一個目錄的
-
- //注意下面方法中畫筆狀態的保護，這在很多情況下都會使用到
- function draw(){
- context2D.clearRect(0,0,600,400);
- context2D.save();//儲存畫筆狀態
- context2D.translate(600/2*Math.random(), 400/2*Math.random());//開始移動畫筆
- context2D.drawImage(pic,0, 0);
- context2D.restore();//繪製結束以後，恢複畫筆狀態
- }
-
- setInterval(draw, 1000);
-
- </script>
- </body>
- </html>
HTML5 Canvas 移動
