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>

04 canvas——位移畫布和旋轉縮放