04 canvas——位移画布和旋转缩放
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Javascript - ExtJs -
- 下一篇: nps-cli 让你在命令行即可方便的查