【繪制】HTML5 Canvas坐標變換——坐標系的平

我的處女作《系列教程》在我的上正在連載更新，希望能得到您的關注和支持，讓我有更多的動力進行創作。

教程介紹、教程目錄等能在里查閱。

傳送門：

引入

有時候，換種思路是可以簡化問題的。

比如，當我們要在畫布中心繪制n個幾何圖形時：

其實這里，我們就簡化了中心點為(0,0)，但極大地簡化了在繪制其他圖形時所需要的計算了。

介紹

在的繪圖環境中，提供了坐標系的平移、縮放和旋轉的方法。

xt2D對象中旋轉、縮放和平移坐標系的方法 方法描述

( )

按照給定的弧度旋轉坐標系。（注意，π弧度等于180角度）

( x, y)

在X和Y方向上分別按照給定的數值進行縮放坐標系

( x, y)

將坐標系平移到給定的X、Y坐標處

為了更加形象地理解，我們以繪制坐標軸的小節為基礎，分別演示旋轉、縮放和平移。為了演示方便，我們為下面變更的標簽添加了黑色邊框。

旋轉

只傳入順時針旋轉的弧度，如π/8就是22.5度。在初始化之前，添加一句代碼：

context.rotate(-Math.PI/8);

在線演示 詳細代碼

我們可以發現，實際上坐標軸的旋轉其實就意為著整個坐標軸的旋轉，因為后續路徑的位置也都是根據坐標來判定的。

縮放

(2,2)就意味著橫坐標和縱坐標都同時放大2倍。在初始化之前，添加一句代碼：

context.scale(2,2);

在線演示 詳細代碼

這里的確按照我們想要的2倍放大了，但原點坐標被隱藏到了下面，如果此時我們想得到原點的圖像，那么就需要我們配合平移來實現了。

平移

(30，30)意味著我們將坐標軸原點平移到了(30,30)的位置，換句話說，將整個畫布圖像沿著(0,0)到(30,30)方向移動了。在初始化之前，添加一句代碼：

context.translate(30,30);

在線演示 詳細代碼

坐標軸被平移了，由于寬高限制，目前坐標軸只能展示出這個范圍。

鏡像

其實鏡像的實現，并沒有提供API，但可以通過實現鏡像的效果。比如說，在繪制了某個圖形后，可以調用(1,-1)來繪制水平鏡像，或者調用(-1,1)來繪制垂直鏡像。

在線演示 詳細代碼

這里就以畫布的x=./2處為鏡面實現鏡像效果。

 drawGrid('lightgray', 10, 10);
    drawAxis();
    context.translate(canvas.width,0);
    context.scale(-1,1);
    drawAxis();

上面這段代碼先調用了()繪制原坐標軸，再將原點平移到的右邊界，然后調用(-1,1)按照原來的方法繪制坐標軸即可得到鏡面圖像。