1.平移
canvas其實只是一個包裝器，真正起着重要作用的部分是2D渲染上下文，這才是我們真正繪制圖形的地方。
然而2D渲染上下文是一種基於屏幕的標准繪制平台。它采用屏幕的笛卡爾坐標系統，以左上角（0,0）坐標為原點。
向右移動時x的坐標值增加，向下移動時y的坐標值增加。
好了了解了坐標系統之后，咱們就可以盡情的移動處理圖形的位置了！
平移，也就是參照2D渲染上下文的原點(0,0)，將圖形從一個坐標點移動到另一個坐標點的過程！
使用方法：translate(x,y) 兩個參數分別以原點為坐標 向左增加x個單位值，向下增加y個單位值。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>變形</title> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillRect(150, 150, 100, 100); context.translate(150, 150); //設置平移 context.fillStyle = "rgb(255,0,0)"; context.fillRect(150, 150, 100, 100); //執行位移后，將原點坐標(150,150)分別加上150，即以坐標(300,300)為原點坐標繪制寬高為100單位的矩形。 context.fillStyle = "rgb(0,255,255)"; context.translate(150, 150); //兩次位移 相當於位移了300 還是以(300,300)為坐標進行繪制 context.fillRect(0, 0, 100, 100); } </script> </head> <body> <canvas id="myCanvas" width="1000" height="1000"> 您的瀏覽器暫不支持畫布！ </canvas> </body> </html>
由此不難看出，canvas的繪圖狀態一旦設置，就會影響之后所有元素的繪制屬性！
這是由於它們都是在2D渲染上下文中操作的，而不是只針對所繪制的圖形。
2.縮放
使用方法：scale(x,y);
調整元素在2D上下文中的尺寸，與平移的區別在於(x,y)參數是縮放倍數，而不是像素值。
單獨使用該方法，會讓之后所有元素都跟着放大相應的倍數，這肯定不是你所想要的！
因此我們可以在縮放前，先調用save()方法，保存一下繪圖狀態，等當前元素執行了縮放之后，
我們再調用一下restore()方法，這樣就可以恢復到之前的繪圖狀態了，從而實現只對當前元素進行縮放的操作！
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>變形</title> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.save(); //先保存下繪圖狀態 context.translate(150, 150); //進行位移操作 context.scale(2, 2); //將繪制元素放大2倍 context.fillRect(0, 0, 100, 100); context.restore(); //恢復繪圖狀態 context.fillRect(0, 0, 100, 100); //此時，繪制的矩形既沒位移，又沒放大！ } </script> </head> <body> <canvas id="myCanvas" width="1000" height="1000"> 您的瀏覽器暫不支持畫布！ </canvas> </body> </html>
交流群：225443677