HTML5 Cavans(5) 平移 縮放 旋轉
阿新 • • 發佈:2019-02-20
translate平移,接受2個引數,分別是x和y軸平移位置,平移的是繪圖原點,之後繪圖的原點就是平移後的位置,之前的圖位置不變
scale 縮放,接受2個引數,分別是x和y縮放係數,1是原來大小,也是對之後繪圖影響,之前圖沒影響
rotate旋轉,引數是旋轉度數,順時針
var cancans = document.getElementById("myCanvas"); //得到2D渲染上下文 var context = document.getElementById("myCanvas").getContext("2d"); context.save()//儲存狀態,以便恢復 //平移 context.fillRect(0, 0, 50, 50); context.translate(100, 100); context.fillRect(0, 0, 50, 50); context.translate(100, 100); context.fillRect(0, 0, 50, 50); context.fillStyle = "red"; //平移縮放結合 context.translate(100, 100); //當前繪圖原點(300,300) context.scale(1, 2); //x座標不縮放,y座標變成2倍 context.fillRect(0, 0, 50, 50); context.restore()//恢復狀態,將繪圖原點重置 context.fillStyle = "blue"; context.fillRect(0, 0, 25, 25); //旋轉45度,預設是順時針 context.translate(100, 100); context.rotate(Math.PI/ 4); context.fillRect(50, 50, 50, 50);