4.4　圖形變形

本節(jié)將介紹如何對(duì)畫布進(jìn)行操作以及如何對(duì)畫布中的圖形進(jìn)行變形，以便設(shè)計(jì)復(fù)雜圖形。

4.4.1　保存和恢復(fù)狀態(tài)

視頻講解

Canvas狀態(tài)存儲(chǔ)在棧中，一個(gè)繪畫狀態(tài)包括兩部分。

　當(dāng)前應(yīng)用的變形，如移動(dòng)、旋轉(zhuǎn)和縮放，包括的樣式屬性：strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、globalCompositeOperation。

　當(dāng)前的裁切路徑，參考4.5節(jié)介紹。

使用save()方法，可以將當(dāng)前的狀態(tài)推送到棧中保存，使用restore()方法可以將上一個(gè)保存的狀態(tài)就從棧中彈出，恢復(fù)上一次所有的設(shè)置。

【示例】下面示例先繪制一個(gè)矩形，填充顏色為#ff00ff，輪廓顏色為藍(lán)色，然后保存這個(gè)狀態(tài)，再繪制另外一個(gè)矩形，填充顏色為#ff0000，輪廓顏色為綠色，最后恢復(fù)第一個(gè)矩形的狀態(tài)，并繪制兩個(gè)小的矩形，則其中一個(gè)矩形填充顏色必為#ff00ff，另外矩形輪廓顏色必為藍(lán)色，因?yàn)榇藭r(shí)已經(jīng)恢復(fù)了原來保存的狀態(tài)，所以會(huì)沿用最先設(shè)定的屬性值，預(yù)覽效果如圖4.30所示。

圖4.30　保存與恢復(fù)canvas狀態(tài)

4.4.2　清除畫布

視頻講解

使用clearRect()方法可以清除指定區(qū)域內(nèi)的所有圖形，顯示畫布背景，該方法用法如下。

    context.clearRect(x,y,width,height);

參數(shù)說明如下：

　x：要清除的矩形左上角的x坐標(biāo)。

　y：要清除的矩形左上角的y坐標(biāo)。

　width：要清除的矩形的寬度，以像素計(jì)。

　height：要清除的矩形的高度，以像素計(jì)。

【示例】下面示例演示了如何使用clearRect()方法來擦除畫布中的繪圖。

在瀏覽器中的預(yù)覽效果如圖4.31所示，先是在畫布上繪制一段弧線。如果單擊“清空畫布”按鈕，則會(huì)清除這段弧線，如圖4.32所示。

圖4.31　繪制弧線

圖4.32　清空畫布

4.4.3　移動(dòng)坐標(biāo)

視頻講解

在默認(rèn)狀態(tài)下，畫布以左上角（0,0）為原點(diǎn)作為繪圖參考。使用translate()方法可以移動(dòng)坐標(biāo)原點(diǎn)，這樣新繪制的圖形就以新的坐標(biāo)原點(diǎn)為參考進(jìn)行繪制。其用法如下。

    context.translate(dx, dy);

參數(shù)dx和dy分別為坐標(biāo)原點(diǎn)沿水平和垂直兩個(gè)方向的偏移量，如圖4.33所示。

【示例】下面示例綜合運(yùn)用了save()、restore()、translate()方法來繪制一個(gè)傘狀圖形。

在瀏覽器中的預(yù)覽效果如圖4.34所示。可見，canvas中圖形移動(dòng)的實(shí)現(xiàn)，其實(shí)是通過改變畫布的坐標(biāo)原點(diǎn)來實(shí)現(xiàn)的，所謂的“移動(dòng)圖形”，只是“看上去”的樣子，實(shí)際移動(dòng)的是坐標(biāo)空間。領(lǐng)會(huì)并掌握這種方法，對(duì)于隨心所欲地繪制圖形非常有幫助。

圖4.33　坐標(biāo)空間的偏移示意圖

圖4.34　移動(dòng)坐標(biāo)空間

4.4.4　旋轉(zhuǎn)坐標(biāo)

視頻講解

使用rotate()方法可以以原點(diǎn)為中心旋轉(zhuǎn)canvas上下文對(duì)象的坐標(biāo)空間，其用法如下。

    context.rotate(angle);

rotate()方法只有一個(gè)參數(shù)，即旋轉(zhuǎn)角度angle，旋轉(zhuǎn)角度以順時(shí)針方向?yàn)檎较颍曰《葹閱挝唬D(zhuǎn)中心為canvas的原點(diǎn)，如圖4.35所示。

圖4.35　以原點(diǎn)為中心旋轉(zhuǎn)canvas

【示例】在上節(jié)示例的基礎(chǔ)上，下面示例設(shè)計(jì)在每次開始繪制圖形之前，先將坐標(biāo)空間旋轉(zhuǎn)PI*(2/4+i/4)，再將坐標(biāo)空間沿y軸負(fù)方向移動(dòng)100，然后開始繪制圖形，從而實(shí)現(xiàn)使圖形沿一中心點(diǎn)平均旋轉(zhuǎn)分布。在瀏覽器中的預(yù)覽效果如圖4.36所示。

圖4.36　旋轉(zhuǎn)坐標(biāo)空間

4.4.5　縮放圖形

視頻講解

使用scale()方法可以增減canvas上下文對(duì)象的像素?cái)?shù)目，從而實(shí)現(xiàn)圖形的放大或縮小，其用法如下。

    context.scale(x,y);

其中x為橫軸的縮放因子，y軸為縱軸的縮放因子，值必須是正值。如果需要放大圖形，則將參數(shù)值設(shè)置為大于1的數(shù)值，如果需要縮小圖形，則將參數(shù)值設(shè)置為小于1的數(shù)值，當(dāng)參數(shù)值等于1時(shí)則沒有任何效果。

【示例】下面示例使用scale(0.95,0.95)來縮小圖形到上次的0.95，共循環(huán)80次，同時(shí)移動(dòng)和旋轉(zhuǎn)坐標(biāo)空間，從而實(shí)現(xiàn)圖形呈螺旋狀由大到小的變化，預(yù)覽效果如圖4.37所示。

圖4.37　縮放圖形

4.4.6　變換圖形

視頻講解

transform()方法可以同時(shí)縮放、旋轉(zhuǎn)、移動(dòng)和傾斜當(dāng)前的上下文環(huán)境，用法如下所示：

    context.transform(a,b,c,d,e,f);

參數(shù)說明如下：

　a：水平縮放繪圖。

　b：水平傾斜繪圖。

　c：垂直傾斜繪圖。

　d：垂直縮放繪圖。

　e：水平移動(dòng)繪圖。

　f：垂直移動(dòng)繪圖。

    context.transform(0,1,1,0,dx,dy);

    context.transform(1,0,0,1,dx,dy);

    context.transform(m11,0,0,m22,0,0);

    context.transform(0,m12,m21,0,0,0);

    context.transform(cosθ,sinθ,- sinθ, cosθ,0,0);

setTransform()方法用于將當(dāng)前的變換矩陣進(jìn)行重置為最初的矩陣，然后以相同的參數(shù)調(diào)用transform方法，用法如下所示。

    context.setTransform(m11, m12, m21, m22, dx, dy);

【示例】下面示例使用setTransform()方法將前面已經(jīng)發(fā)生變換的矩陣首先重置為最初的矩陣，即恢復(fù)最初的原點(diǎn)，然后再將坐標(biāo)原點(diǎn)改為（10,10），并以新的坐標(biāo)為基準(zhǔn)繪制一個(gè)藍(lán)色的矩形。

在瀏覽器中的預(yù)覽效果如圖4.38所示。在本例中，使用scale(0.95,0.95)來縮小圖形到上次的0.95，共循環(huán)89次，同時(shí)移動(dòng)和旋轉(zhuǎn)坐標(biāo)空間，從而實(shí)現(xiàn)圖形呈螺旋狀由大到小的變化。

圖4.38　矩陣重置并變換