4.1 縮放

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

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

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

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

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

4.2 位移畫布

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

• x： 添加到水平坐標(biāo)（x）上的值

• y： 添加到垂直坐標(biāo)（y）上的值

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

• 位移畫布一般配合縮放和旋轉(zhuǎn)等

4.3 旋轉(zhuǎn)

• context.rotate(angle); 方法旋轉(zhuǎn)當(dāng)前的繪圖

• 注意參數(shù)是弧度（PI），如需將角度轉(zhuǎn)換為弧度，請使用 degrees*Math.PI/180 公式進(jìn)行計(jì)算

4.4 繪制環(huán)境保存和還原

• ctx.save() 保存當(dāng)前環(huán)境的狀態(tài)

• 可以把當(dāng)前繪制環(huán)境進(jìn)行保存到緩存中。

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

• 獲取最近緩存的ctx

• 一般配合位移畫布使用

4.5 設(shè)置繪制環(huán)境的透明度（了解）

• context.globalAlpha=number;

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

• 設(shè)置透明度是全局的透明度的樣式

案例：

<div><canvas id="canvas">您當(dāng)前瀏覽器不支持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";/*狀態(tài)ctx1*/ctx.fillStyle = 'red';ctx.fillRect(10,10,100,100);ctx.save();/*保存狀態(tài)1*//*新的狀態(tài)ctx2*/ctx.translate(200,200);//把整個(gè)畫布位移到（200,200）ctx.rotate(30*Math.PI/180);//把整個(gè)畫布旋轉(zhuǎn)30度ctx.scale(2,2);//把整個(gè)畫布放大x和y方向各2倍ctx.globalAlpha = .3;//設(shè)置透明度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();//把上次保存的狀態(tài)1還原/*狀態(tài)1開始*/ctx.fillRect(150,100,100,100);})();</script>

轉(zhuǎn)載于:https://www.cnblogs.com/suxiaoxia/p/7190614.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。