官术网_书友最值得收藏!

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的顯示效果

主站蜘蛛池模板: 永胜县| 札达县| 邻水| 乌苏市| 民县| 陆丰市| 永新县| 淮北市| 汝阳县| 沅江市| 沽源县| 同江市| 玉龙| 广东省| 壶关县| 兴城市| 贵阳市| 合阳县| 同德县| 石嘴山市| 巴楚县| 蓬安县| 东辽县| 册亨县| 信阳市| 灵石县| 蓬溪县| 宝清县| 天峨县| 南溪县| 布拖县| 磴口县| 四平市| 东安县| 峨眉山市| 福海县| 隆昌县| 东辽县| 浮梁县| 内黄县| 双鸭山市|