Canvas 時鐘
在接下來的章節中，我們將使用 HTML 畫布構建一個模擬時鐘。
第一部分 - 創建畫布
時鐘需要一個 HTML 容器。創建 HTML 畫布：
HTML 代碼：
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawClock();
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
}
</script>
</body>
</html>
代碼解釋
將 HTML <canvas> 元素添加到您的頁面：
<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
創建一個畫布對象（const canvas）：
const canvas = document.getElementById("canvas");
為畫布對象創建一個 2d 繪圖對象 (const ctx)：
const ctx = canvas.getContext("2d");
使用畫布的高度來計算時鐘的半徑：
let radius = canvas.height / 2;
提示
請使用畫布的高度來計算時鐘的半徑，使時鐘適用于所有畫布的尺寸。
將（繪圖對象的）（0,0）位置重新映射到畫布的中心：
ctx.translate(radius, radius);
減小時鐘半徑（至 90%），將時鐘繪制在畫布內：
radius = radius * 0.90;
創建繪制時鐘的函數：
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
}
