1.平移
canvas其實只是乙個包裝器，真正起著重要作用的部分是2d渲染上下文，這才是我們真正繪製圖形的地方。
然而2d渲染上下文是一種基於螢幕的標準繪製平台。它採用螢幕的笛卡爾座標系統，以左上角(0,0)座標為原點。
向右移動時x的座標值增加，向下移動時y的座標值增加。
好了了解了座標系統之後，咱們就可以盡情的移動處理圖形的位置了！
平移，也就是參照2d渲染上下文的原點(0,0)，將圖形從乙個座標點移動到另乙個座標點的過程！
使用方法：translate(x,y) 兩個引數分別以原點為座標 向左增加x個單位值，向下增加y個單位值。
變形 window.οnlοad= function() {varcanvas=document.getelementbyid("mycanvas");varcontext=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);
您的瀏覽器暫不支援畫布！
Canvas的平移旋轉等
原始碼中的方法 preconcat the current matrix with the specified translation param dx the distance to translate in x param dy the distance to translate in y pu...
canvas實現放大鏡
我們先來簡單實現下放大鏡，嗯嗯 電商專案的商品詳情的放大鏡，差不多就是下面這個樣子吧。有點小瑕疵，但至少功能實現了。zoom canvas1,canvas2 style class zoom canvas1 width 600 height 337.335 canvas canvas2 width ...
Bitmap和Canvas的平移 縮放 旋轉
matrix matrix new matrix matrix.posttranslate tx,ty matrix.postscale scale,scale canvas.drawbitmap bmp,matrix,null 畫布不動，bmp先平移後縮放，均是相對於原始座標 等價 matrix ...