大白話描述標簽的主要用途，如何在其上繪制簡單圖形？
<canvas> 標簽的主要用途
<canvas> 標簽是 HTML5 中新增的一個標簽，它就像是一塊“畫布”，你可以在網頁上用它來繪制各種圖形、動畫、制作游戲等。簡單來說，它給你提供了一個可以自由發揮創作的空間，讓你在網頁上畫出你想要的東西。
如何在 <canvas> 上繪制簡單圖形
下面我們來詳細介紹如何在 <canvas> 上繪制簡單圖形，這里以繪制一個矩形和一個圓形為例。
示例代碼
<!DOCTYPE html>
<html lang="en"><head><!-- 設置文檔的字符編碼為 UTF-8 --><meta charset="UTF-8"><!-- 設置頁面在移動設備上的顯示方式 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 設置網頁的標題 --><title>Canvas 繪圖示例</title>
</head><body><!-- 創建一個 canvas 元素，寬為 400 像素，高為 300 像素 --><canvas id="myCanvas" width="400" height="300"></canvas><script>// 獲取 canvas 元素const canvas = document.getElementById('myCanvas');// 獲取 2D 繪圖上下文，這就像是拿到了畫筆和顏料const ctx = canvas.getContext('2d');// 繪制一個矩形// 設置填充顏色為藍色ctx.fillStyle = 'blue';// 繪制一個填充矩形，起始坐標為 (50, 50)，寬為 200 像素，高為 100 像素ctx.fillRect(50, 50, 200, 100);// 繪制一個圓形// 開始一個新的路徑，就像是準備開始畫新的圖形ctx.beginPath();// 設置圓形的圓心坐標為 (300, 200)，半徑為 50 像素，起始角度為 0，結束角度為 2π（表示一個完整的圓）ctx.arc(300, 200, 50, 0, 2 * Math.PI);// 設置填充顏色為紅色ctx.fillStyle = 'red';// 填充圓形ctx.fill();// 關閉路徑ctx.closePath();</script>
</body></html>
代碼解釋
-
HTML 部分：
<canvas>標簽創建了一個畫布，id屬性用于在 JavaScript 中引用這個畫布，width和height屬性分別設置了畫布的寬度和高度。
-
JavaScript 部分：
document.getElementById('myCanvas')：通過id獲取到<canvas>元素。canvas.getContext('2d')：獲取 2D 繪圖上下文，這是一個對象，包含了各種繪圖方法和屬性。ctx.fillStyle：設置填充顏色。ctx.fillRect(x, y, width, height)：繪制一個填充矩形，x和y是矩形左上角的坐標，width和height分別是矩形的寬度和高度。ctx.beginPath()：開始一個新的路徑，用于繪制新的圖形。ctx.arc(x, y, radius, startAngle, endAngle)：繪制一個圓弧或圓形，x和y是圓心的坐標，radius是半徑，startAngle和endAngle分別是起始角度和結束角度。ctx.fill()：填充當前路徑。ctx.closePath()：關閉當前路徑。
)
)
