4.1 縮放

• scale() 方法縮放當前繪圖，更大或更小

• 語法：context.scale(scalewidth,scaleheight)

• scalewidth : 縮放當前繪圖的寬度 (1=100%, 0.5=50%, 2=200%, 依次類推)

• scaleheight : 縮放當前繪圖的高度 (1=100%, 0.5=50%, 2=200%, etc.)

• 注意：縮放的是整個畫布，縮放后，繼續繪制的圖形會被放大或縮小

4.2 位移畫布

• ctx.translate(x,y) 方法重新映射畫布上的 (0,0) 位置

• x： 添加到水平坐標（x）上的值

• y： 添加到垂直坐標（y）上的值

• 發生位移后，相當于把畫布的0,0坐標 更換到新的x,y的位置，所有繪制的新元素都被影響

• 位移畫布一般配合縮放和旋轉等

4.3 旋轉

• context.rotate(angle); 方法旋轉當前的繪圖

• 注意參數是弧度（PI），如需將角度轉換為弧度，請使用 degrees*Math.PI/180 公式進行計算

4.4 繪制環境保存和還原

• ctx.save() 保存當前環境的狀態

• 可以把當前繪制環境進行保存到緩存中。

• ctx.restore() 返回之前保存過的路徑狀態和屬性

• 獲取最近緩存的ctx

• 一般配合位移畫布使用

4.5 設置繪制環境的透明度（了解）

• context.globalAlpha=number;

• number:透明值。必須介于 0.0（完全透明） 與 1.0（不透明） 之間

• 設置透明度是全局的透明度的樣式

案例：

<div><canvas id="canvas">您當前瀏覽器不支持canvas，請升級瀏覽器</canvas></div> <script>(function () {var canvas = document.querySelector('#canvas');var ctx = canvas.getContext('2d');canvas.width = 600;canvas.height = 600;canvas.style.border = "1px solid #000";/*狀態ctx1*/ctx.fillStyle = 'red';ctx.fillRect(10,10,100,100);ctx.save();/*保存狀態1*//*新的狀態ctx2*/ctx.translate(200,200);//把整個畫布位移到（200,200）ctx.rotate(30*Math.PI/180);//把整個畫布旋轉30度ctx.scale(2,2);//把整個畫布放大x和y方向各2倍ctx.globalAlpha = .3;//設置透明度ctx.fillStyle = 'skyblue';ctx.moveTo(0,0);ctx.lineTo(400,0);ctx.moveTo(0,0);ctx.lineTo(0,400);ctx.stroke();ctx.fillRect(10,10,40,40);ctx.restore();//把上次保存的狀態1還原/*狀態1開始*/ctx.fillRect(150,100,100,100);})();</script>

轉載于:https://www.cnblogs.com/suxiaoxia/p/7190614.html

總結

以上是生活随笔為你收集整理的04 canvas——位移画布和旋转缩放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。