【繪制】HTML5 Canvas坐標(biāo)變換——坐標(biāo)系的平

我的處女作《系列教程》在我的上正在連載更新,希望能得到您的關(guān)注和支持,讓我有更多的動(dòng)力進(jìn)行創(chuàng)作。
教程介紹、教程目錄等能在里查閱。
傳送門:
引入
有時(shí)候,換種思路是可以簡化問題的。
比如,當(dāng)我們要在畫布中心繪制n個(gè)幾何圖形時(shí):
其實(shí)這里,我們就簡化了中心點(diǎn)為(0,0),但極大地簡化了在繪制其他圖形時(shí)所需要的計(jì)算了。
介紹
在的繪圖環(huán)境中,提供了坐標(biāo)系的平移、縮放和旋轉(zhuǎn)的方法。
xt2D對(duì)象中旋轉(zhuǎn)、縮放和平移坐標(biāo)系的方法 方法描述
( )
按照給定的弧度旋轉(zhuǎn)坐標(biāo)系。(注意,π弧度等于180角度)
( x, y)
在X和Y方向上分別按照給定的數(shù)值進(jìn)行縮放坐標(biāo)系
( x, y)
將坐標(biāo)系平移到給定的X、Y坐標(biāo)處
為了更加形象地理解,我們以繪制坐標(biāo)軸的小節(jié)為基礎(chǔ),分別演示旋轉(zhuǎn)、縮放和平移。為了演示方便,我們?yōu)橄旅孀兏臉?biāo)簽添加了黑色邊框。
旋轉(zhuǎn)
只傳入順時(shí)針旋轉(zhuǎn)的弧度,如π/8就是22.5度。在初始化之前,添加一句代碼:
context.rotate(-Math.PI/8);
在線演示 詳細(xì)代碼
我們可以發(fā)現(xiàn),實(shí)際上坐標(biāo)軸的旋轉(zhuǎn)其實(shí)就意為著整個(gè)坐標(biāo)軸的旋轉(zhuǎn),因?yàn)楹罄m(xù)路徑的位置也都是根據(jù)坐標(biāo)來判定的。
縮放
(2,2)就意味著橫坐標(biāo)和縱坐標(biāo)都同時(shí)放大2倍。在初始化之前,添加一句代碼:
context.scale(2,2);
在線演示 詳細(xì)代碼
這里的確按照我們想要的2倍放大了,但原點(diǎn)坐標(biāo)被隱藏到了下面,如果此時(shí)我們想得到原點(diǎn)的圖像,那么就需要我們配合平移來實(shí)現(xiàn)了。
平移
(30,30)意味著我們將坐標(biāo)軸原點(diǎn)平移到了(30,30)的位置,換句話說,將整個(gè)畫布圖像沿著(0,0)到(30,30)方向移動(dòng)了。在初始化之前,添加一句代碼:
context.translate(30,30);
在線演示 詳細(xì)代碼
坐標(biāo)軸被平移了,由于寬高限制,目前坐標(biāo)軸只能展示出這個(gè)范圍。
鏡像
其實(shí)鏡像的實(shí)現(xiàn),并沒有提供API,但可以通過實(shí)現(xiàn)鏡像的效果。比如說,在繪制了某個(gè)圖形后,可以調(diào)用(1,-1)來繪制水平鏡像,或者調(diào)用(-1,1)來繪制垂直鏡像。
在線演示 詳細(xì)代碼
這里就以畫布的x=./2處為鏡面實(shí)現(xiàn)鏡像效果。
drawGrid('lightgray', 10, 10);
drawAxis();
context.translate(canvas.width,0);
context.scale(-1,1);
drawAxis();
上面這段代碼先調(diào)用了()繪制原坐標(biāo)軸,再將原點(diǎn)平移到的右邊界,然后調(diào)用(-1,1)按照原來的方法繪制坐標(biāo)軸即可得到鏡面圖像。