Canvas အချိန်စက္ကူ

在接下来的章节中，我们将使用 HTML 画布构建一个模拟时钟。

第一部分 - 创建画布

时钟需要一个 HTML 容器。创建 HTML 画布：

HTML 代码：

亲自试一试

代码解释

将 HTML 元素添加到您的页面：

创建一个画布对象（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();
}

另请参阅：

CodeW3C.com 的完整 Canvas 参考手册