- Web編程基礎(chǔ):HTML5、CSS3、JavaScript(第2版)
- 任平紅 陳矗編著
- 1083字
- 2019-07-01 10:09:09
3.4 圖形變換
利用圖形的變換可以繪制出大量復(fù)雜多變的圖形。圖形的變換主要包括移動、縮放、旋轉(zhuǎn)、變形等。
3.4.1 保存與恢復(fù)
在繪畫的時候,本來使用綠色筆畫,突然需要改用紅色筆畫,但畫完之后又要使用綠色筆畫。如果是現(xiàn)實中的作畫,可以使用不同的筆蘸上不同的墨水,根據(jù)顏色選擇畫筆。但是在canvas中畫筆只有一支。如果要更換畫筆的顏色,就需要保存和恢復(fù)狀態(tài),狀態(tài)其實就是畫布當(dāng)前屬性的一個快照,包括圖形的屬性、當(dāng)前裁切路徑、當(dāng)前應(yīng)用的變換。canvas中使用save()方法來保存狀態(tài),使用restore()方法來恢復(fù)狀態(tài)。canvas狀態(tài)是用棧來保存的,每次調(diào)用save()方法,就把當(dāng)前狀態(tài)入棧保存,當(dāng)前狀態(tài)成為棧頂;每次調(diào)用restore()方法,就把棧頂?shù)臓顟B(tài)取出來,并將畫布恢復(fù)到這個狀態(tài)。例如,saveAndRestore.html,利用狀態(tài)的保存與恢復(fù)繪制顏色不同的填充矩形。
saveAndRestore.html:

saveAndRestore.html在瀏覽器中的顯示效果如圖3-9所示。

圖3-9 saveAndRestore.html的顯示效果
3.4.2 移動
在繪制圖形時,可以使用Context對象的translate()方法移動坐標(biāo)空間,使畫布的坐標(biāo)空間發(fā)生水平和垂直方向的偏移,translate(dx, dy)中的dx為水平方向的偏移量,dy為垂直方向的偏移量。例如,translate.html,利用移動繪制一排圓。
translate.html:

translate.html在瀏覽器中的顯示效果如圖3-10所示。

圖3-10 translate.html的顯示效果
3.4.3 縮放
Context對象的scale()方法用于增減canvas上下文對象中的像素數(shù)目,從而實現(xiàn)圖形或圖像的放大或縮小,context.scale(sx, sy)中的sx為x軸的縮放因子,sy為y軸的縮放因子,它們的值必須是正數(shù),如果值大于1則為放大圖形,如果值小于1則為縮小圖形。例如,scale.html,繪制逐漸縮小的圓。
scale.html:

scale.html在瀏覽器中的顯示效果如圖3-11所示。

圖3-11 scale.html的顯示效果
3.4.4 旋轉(zhuǎn)
Context對象的rotate()方法用于以原點為中心旋轉(zhuǎn)上下文對象的坐標(biāo)空間,context.rotate(angle)方法中的angle參數(shù)指以弧度計的順時針方向的旋轉(zhuǎn)角度。例如,rotate.html,利用旋轉(zhuǎn)繪制環(huán)狀排列的圓。
rotate.html:

rotate.html在瀏覽器中的顯示效果如圖3-12所示。

圖3-12 rotate.html的顯示效果
3.4.5 變形
Context對象的transform()方法用于直接修改變換矩陣。矩陣變換常用于坐標(biāo)變換不能達到預(yù)期效果的情況,能夠?qū)崿F(xiàn)比普通的坐標(biāo)變換更加復(fù)雜的效果。transform()方法的用法如下:
context.transform(a, b, c, d, e, f);
各參數(shù)的含義為:
● a——水平縮放繪圖;
● b——水平傾斜繪圖;
● c——垂直傾斜繪圖;
● d——垂直縮放繪圖;
● e——水平移動繪圖;
● f——垂直移動繪圖。
可見,可以在transform()方法中同時實現(xiàn)平移、縮放、旋轉(zhuǎn),也可以使用transform()方法實現(xiàn)以上3種變換中的一種。
畫布上的每一個對象都擁有一個當(dāng)前的變換矩陣,Context對象的setTransform()方法用于將當(dāng)前的變換矩陣重置為最初的矩陣,即單位矩陣,然后以相同的參數(shù)運行transform()方法,也就是說,setTransform()方法允許縮放、旋轉(zhuǎn)、移動并傾斜當(dāng)前的環(huán)境。該變換只會影響setTransform()方法之后的繪圖。例如,transform.html,利用變形和旋轉(zhuǎn)在畫布上顯示呈螺旋狀排列的半透明的半圓。
transform.html:

transform.html在瀏覽器中的顯示效果如圖3-13所示。

圖3-13 transform.html的顯示效果
- Vue 3移動Web開發(fā)與性能調(diào)優(yōu)實戰(zhàn)
- 從零開始:數(shù)字圖像處理的編程基礎(chǔ)與應(yīng)用
- Hands-On Machine Learning with scikit:learn and Scientific Python Toolkits
- Interactive Data Visualization with Python
- Learning Data Mining with Python
- Visual Basic程序設(shè)計(第3版):學(xué)習(xí)指導(dǎo)與練習(xí)
- PHP網(wǎng)絡(luò)編程學(xué)習(xí)筆記
- 老“碼”識途
- 機械工程師Python編程:入門、實戰(zhàn)與進階
- ADI DSP應(yīng)用技術(shù)集錦
- WebRTC技術(shù)詳解:從0到1構(gòu)建多人視頻會議系統(tǒng)
- Mastering Web Application Development with AngularJS
- 快速入門與進階:Creo 4·0全實例精講
- Canvas Cookbook
- 計算機應(yīng)用基礎(chǔ)(第二版)