HTML5 畫布形狀 · ZetCode 中文系列教程

# HTML5 畫布形狀 > 原文： [https://zetcode.com/gfx/html5canvas/shapes/](https://zetcode.com/gfx/html5canvas/shapes/) 在 HTML5 畫布教程的這一部分中，我們創建一些基本的和更高級的幾何形狀。 ## 長方形第一個程序繪制兩個矩形。 `rectangles.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas rectangles</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'gray'; ctx.fillRect(10, 10, 60, 60); ctx.fillRect(100, 10, 100, 60); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="350" height="250"> </canvas> </body> </html> ``` 該示例使用`drawRect()`方法繪制矩形。 ```js ctx.fillStyle = 'gray'; ``` 矩形的內部被涂成灰色。 ```js ctx.fillRect(10, 10, 60, 60); ctx.fillRect(100, 10, 100, 60); ``` `fillRect()`方法用于繪制正方形和矩形。前兩個參數是要繪制的形狀的 x 和 y 坐標。最后兩個參數是形狀的寬度和高度。 ![Rectangles](https://img.kancloud.cn/4c/ce/4cce279169dca78419c844f3483a5e77_338x217.jpg) 圖：矩形 ## 基本形狀在下面的程序中，我們繪制一些基本形狀。 `shapes.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas shapes</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'gray'; ctx.fillRect(10, 10, 60, 60); ctx.fillRect(100, 10, 90, 60); ctx.beginPath(); ctx.arc(250, 40, 32, 0, 2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.moveTo(10, 160); ctx.lineTo(90, 160); ctx.lineTo(50, 110); ctx.closePath(); ctx.fill(); ctx.save(); ctx.scale(2, 1); ctx.beginPath(); ctx.arc(72, 130, 25, 0, 2*Math.PI); ctx.fill(); ctx.restore(); ctx.beginPath(); ctx.arc(250, 120, 40, 0, Math.PI); ctx.fill(); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="350" height="350"> </canvas> </body> </html> ``` 畫布上繪制了六個不同的形狀。 ```js ctx.fillStyle = 'gray'; ``` 形狀將被涂成灰色。 ```js ctx.fillRect(10, 10, 60, 60); ctx.fillRect(100, 10, 90, 60); ``` 使用`fillRect()`方法繪制矩形。矩形是唯一未通過`beginPath()`方法啟動的形狀。 ```js ctx.beginPath(); ctx.arc(250, 40, 32, 0, 2*Math.PI); ctx.fill(); ``` 用`arc()`方法繪制一個圓。該方法將弧添加到創建的路徑。前兩個參數定義圓弧中心點的 x 和 y 坐標。接下來的兩個參數指定圓弧的起點和終點。角度以弧度定義。最后一個參數是可選的；它指定繪制圓弧的方向。默認方向為順時針。 ```js ctx.beginPath(); ctx.moveTo(10, 160); ctx.lineTo(90, 160); ctx.lineTo(50, 110); ctx.closePath(); ctx.fill(); ``` 使用`moveTo()`和`lineTo()`方法，我們繪制了一個三角形。 `closePath()`方法使筆移回當前子路徑的起點。在我們的例子中，它完成了三角形的形狀。 ```js ctx.save(); ctx.scale(2, 1); ctx.beginPath(); ctx.arc(72, 130, 25, 0, 2*Math.PI); ctx.fill(); ctx.restore(); ``` 通過縮放圓形來繪制橢圓形。這些操作位于`save()`和`restore()`方法之間，因此縮放操作不會影響后續圖形。 ```js ctx.beginPath(); ctx.arc(250, 120, 40, 0, Math.PI); ctx.fill(); ``` 最后的形狀（半圓）用`arc()`方法繪制。 ![Basic shapes](https://img.kancloud.cn/52/25/5225c0086c4f1f93d03b084a83a7472c_376x313.jpg) 圖：基本形狀 ## 餅形圖餅圖是圓形圖，將其分成多個切片以說明數值比例。 `piechart.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas pie chart</title> <style> canvas {background: #bbb} </style> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var beginAngle = 0; var endAngle = 0; var data = [170, 60, 45]; var total = 0; var colours = ["#95B524", "#AFCC4C", "#C1DD54"]; const SPACE = 10; for (var i = 0; i < data.length; i++) { total += data[i]; } ctx.strokeStyle = 'white'; ctx.lineWidth = 2; for (var j = 0; j < data.length; j++) { endAngle = beginAngle + (Math.PI * 2 * (data[j] / total)); ctx.fillStyle = colours[j]; ctx.beginPath(); ctx.moveTo(canvas.width/2, canvas.height/2); ctx.arc(canvas.width/2, canvas.height/2, canvas.height/2 - SPACE, beginAngle, endAngle, false); ctx.closePath(); ctx.fill(); ctx.stroke(); beginAngle = endAngle; } } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="350" height="300"> </canvas> </body> </html> ``` 該示例繪制了一個餅圖。它有三片，分別涂有不同的綠色陰影。 ```js <style> canvas {background: #bbb} </style> ``` 為了使圖表的白色輪廓清晰可見，我們將畫布的背景色更改為灰色。 ```js var data = [170, 60, 45]; ``` 這是餅圖說明的數據。 ```js const SPACE = 10; ``` `SPACE`常數是從餅圖到畫布邊界的距離。 ```js endAngle = beginAngle + (Math.PI * 2 * (data[j] / total)); ``` 該公式計算當前繪制的切片的結束角度。 ```js ctx.moveTo(canvas.width/2, canvas.height/2); ctx.arc(canvas.width/2, canvas.height/2, canvas.height/2 - SPACE, beginAngle, endAngle, false); ctx.closePath(); ``` 三種方法可用于繪制當前切片：`moveTo()`，`arc()`和`closePath()`。 ```js ctx.fill(); ctx.stroke(); ``` 我們繪制形狀的內部和輪廓。 ```js beginAngle = endAngle; ``` 對于下一個切片，最后的終止角度成為起始角度。 ![Pie chart](https://img.kancloud.cn/e3/fc/e3fcc40443c87c74a914980c237535c4_380x419.jpg) 圖：餅圖 ## 星星下面的示例創建一個星形。 `star.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas star shape</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'gray'; var points = [ [ 0, 85 ], [ 75, 75 ], [ 100, 10 ], [ 125, 75 ], [ 200, 85 ], [ 150, 125 ], [ 160, 190 ], [ 100, 150 ], [ 40, 190 ], [ 50, 125 ], [ 0, 85 ] ]; var len = points.length; ctx.beginPath(); ctx.moveTo(points[0][0], points[0][1]); for (var i = 0; i < len; i++) { ctx.lineTo(points[i][0], points[i][1]); } ctx.fill(); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="350" height="250"> </canvas> </body> </html> ``` 從一系列點創建星形。 ```js var points = [ [ 0, 85 ], [ 75, 75 ], [ 100, 10 ], [ 125, 75 ], [ 200, 85 ], [ 150, 125 ], [ 160, 190 ], [ 100, 150 ], [ 40, 190 ], [ 50, 125 ], [ 0, 85 ] ]; ``` 這些是星星的坐標。 ```js ctx.moveTo(points[0][0], points[0][1]); ``` 我們使用`moveTo()`方法移動到形狀的初始坐標。 ```js for (var i = 0; i < len; i++) { ctx.lineTo(points[i][0], points[i][1]); } ``` 在這里，我們使用`lineTo()`方法連接星星的所有坐標。 ```js ctx.fill(); ``` `fill()`方法使用定義的（灰色）顏色填充星形內部。 ![Star](https://img.kancloud.cn/29/f2/29f27859b7329c7f62d08e1ebc2b038c_305x335.jpg) 圖：星星 ## 三個圓圈可以通過合成來創建新形狀。合成是確定畫布中形狀混合方式的規則。 `three_circles.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 Canvas three circles</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.lineWidth = 3; ctx.fillStyle = 'gray'; ctx.beginPath(); ctx.arc(90, 90, 60, 0, 2*Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(120, 150, 60, 0, 2*Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(150, 100, 60, 0, 2*Math.PI); ctx.stroke(); ctx.globalCompositeOperation='destination-out'; ctx.beginPath(); ctx.arc(90, 90, 60, 0, 2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(120, 150, 60, 0, 2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(150, 100, 60, 0, 2*Math.PI); ctx.fill(); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="400" height="350"> </canvas> </body> </html> ``` 該示例通過組合三個圓的輪廓來創建形狀。三個圓圈重疊。 ```js ctx.beginPath(); ctx.arc(90, 90, 60, 0, 2*Math.PI); ctx.stroke(); ``` 在畫布上繪制了一個圓圈。 ```js ctx.globalCompositeOperation='destination-out'; ``` 合成操作設置為`destination-out`。在此模式下，目的地和來源不重疊的任何地方都會顯示目的地。在其他任何地方都顯示透明性。 ```js ctx.beginPath(); ctx.arc(90, 90, 60, 0, 2*Math.PI); ctx.fill(); ``` 現在，相同的圓圈充滿了灰色。新圖形將刪除兩個重疊的現有圖形。結果，僅保留輪廓。 ![Three circles](https://img.kancloud.cn/86/b2/86b2a91fc4e1919a7c9f07abdac2c7c4_341x344.jpg) 圖：三個圓圈在 HTML5 畫布教程的這一部分中，我們介紹了 HTML5 畫布中的一些基本形狀和更高級的形狀。