HTML5 canvas 中的變換 · ZetCode 中文系列教程

# HTML5 `canvas`中的變換 > 原文： [https://zetcode.com/gfx/html5canvas/transformations/](https://zetcode.com/gfx/html5canvas/transformations/) 在 HTML5 畫布教程的這一部分中，我們將討論變換。仿射變換由零個或多個線性變換（旋轉，縮放或剪切）和平移（移位）組成。幾個線性變換可以組合成一個矩陣。旋轉是使剛體繞固定點移動的變換。縮放是一種放大或縮小對象的變換。比例因子在所有方向上都是相同的。平移是使每個點在指定方向上移動恒定距離的變換。剪切是一種使對象垂直于給定軸移動的變換，該值在軸的一側比另一側更大。有一種`transform()`方法，該方法將當前變換與該方法的參數所描述的矩陣相乘。我們能夠縮放，旋轉，移動和剪切上下文。還有執行特定變換的方法：`translate()`，`rotate`和`scale()`。 ## 平移以下示例顯示了一個簡單的平移。 `translation.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas translation</title> <style> canvas {border: 1px solid #bbbbbb} </style> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'gray'; ctx.translate(canvas.width/2, canvas.height/2); ctx.beginPath(); ctx.arc(0, 0, 30, 0, 2*Math.PI); ctx.fill(); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="150" height="150"> </canvas> </body> </html> ``` 該示例在畫布的中間繪制一個圓圈。 ```js ctx.translate(canvas.width/2, canvas.height/2); ``` `translate()`方法將坐標系的原點移到畫布的中間。 ```js ctx.beginPath(); ctx.arc(0, 0, 30, 0, 2*Math.PI); ctx.fill(); ``` 畫一個圓。它的中心點是畫布的中間。 ![Translation](https://img.kancloud.cn/e9/a1/e9a13d12c26d5f70a81dd4e5c7f100c3_302x290.jpg) 圖：平移 ## 旋轉下一個示例演示了旋轉。 `rotation.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas rotation</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'gray'; ctx.rotate(Math.PI/10); ctx.fillRect(50, 10, 120, 80); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="200" height="200"> </canvas> </body> </html> ``` 該示例對矩形執行旋轉。 ```js ctx.rotate(Math.PI/10); ``` `rotate()`方法執行旋轉。角度自變量表示順時針旋轉角度并以弧度表示。 ![Rotation](https://img.kancloud.cn/e2/f1/e2f16b5474650b0cfa9d121667c35231_302x290.jpg) 圖：旋轉 ## 縮放縮放是通過`scale()`方法完成的。該方法采用兩個參數：x 比例因子和 y 比例因子。 `scaling.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas scaling</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'gray'; ctx.fillRect(20, 20, 80, 50); ctx.save(); ctx.translate(110, 22); ctx.scale(0.5, 0.5); ctx.fillRect(0, 0, 80, 50); ctx.restore(); ctx.translate(170, 20); ctx.scale(1.5, 1.5); ctx.fillRect(0, 0, 80, 50); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="300" height="200"> </canvas> </body> </html> ``` 在示例中，有一個矩形對象。首先，我們縮小比例，然后再放大一點。 ```js ctx.save(); ctx.translate(110, 22); ctx.scale(0.5, 0.5); ctx.fillRect(0, 0, 80, 50); ctx.restore(); ``` 變換操作是累加的。為了隔離變換和縮放操作，我們將它們放在`save()`和`restore()`方法之間。 `save()`方法保存畫布的整個狀態，`restore()`方法恢復畫布的整個狀態。 ![Scaling](https://img.kancloud.cn/28/c0/28c0bfe64c17c7b218e657fc6ce9bec5_369x283.jpg) 圖：縮放 ## 剪切剪切是使對象的形狀沿兩個軸中的一個或兩個變形的變換。像縮放和平移一樣，可以僅沿一個或兩個坐標軸進行剪切。 `shearing.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas shearing</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.translate(0.5, 0.5); ctx.setLineDash([2]); ctx.save(); ctx.strokeStyle = 'green'; ctx.strokeRect(50, 90, 160, 50); ctx.restore(); ctx.save(); ctx.strokeStyle = 'blue'; ctx.transform(1, 1, 0, 1, 0, 0); ctx.strokeRect(50, 40, 80, 50); ctx.restore(); ctx.save(); ctx.strokeStyle = 'red'; ctx.transform(1, 1, 0, 1, 0, -130); ctx.strokeRect(130, 10, 80, 50); ctx.restore(); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="300" height="300"> </canvas> </body> </html> ``` 沒有特定的剪切方法，我們使用通用的`transform()`方法。 ```js ctx.translate(0.5, 0.5); ``` 這條線使矩形的線更平滑。 ```js ctx.save(); ctx.strokeStyle = 'blue'; ctx.transform(1, 1, 0, 1, 0, 0); ctx.strokeRect(50, 40, 80, 50); ctx.restore(); ``` 藍色矩形被水平剪切（傾斜）。 `transform()`方法的參數為：水平縮放，水平剪切，垂直剪切，垂直縮放，水平平移和垂直平移。 ![Shearing](https://img.kancloud.cn/e2/83/e283b7b6a36fb095d59ceb689ad075bc_359x358.jpg) 圖：抖動 ## 甜甜圈在下面的示例中，我們通過旋轉橢圓來創建復雜的形狀。 `DonutEx.java` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas donut</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'gray'; ctx.translate(0.5, 0.5); var x = canvas.width/2; var y = canvas.height/2; for (var deg = 0; deg < 360; deg += 5) { var rad = deg * Math.PI / 180; ctx.beginPath(); ctx.ellipse(x, y, 30, 130, rad, 0, 2*Math.PI); ctx.stroke(); } } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="300" height="300"> </canvas> </body> </html> ``` 該示例使用`ellipse()`方法，在撰寫本教程時，并非所有瀏覽器都支持該方法。該示例在 Chrome 和 Opera 上運行。 ```js var x = canvas.width/2; var y = canvas.height/2; ``` 橢圓的中心位于畫布的中心。 ```js for (var deg = 0; deg < 360; deg += 5) { var rad = deg * Math.PI / 180; ctx.beginPath(); ctx.ellipse(x, y, 30, 130, rad, 0, 2*Math.PI); ctx.stroke(); } ``` 我們創建 36 個橢圓。橢圓旋轉。 `ellipse()`方法采用以下參數：橢圓中心點的 x 和 y 坐標，橢圓的長軸半徑，橢圓的短軸半徑，旋轉，起始角度和終止角度。在 Java 2D 教程的這一部分中，我們討論了變換。