Canvas 时钟

2024-07-09 15:17| 来源: 网络整理| 查看: 265

w3school 在线教程 HTML 系列教程浏览器脚本服务器脚本编程教程 XML 系列教程建站手册参考手册 HTML 图形 HTML 图形 HTML 绘图 Graphics Canvas Plotly.js Chart.js Google D3.js 谷歌地图 Maps 简介 Maps 基础 Maps 叠加层 Maps 事件 Maps 控件 Maps 类型 Maps 参考手册 SVG 教程 SVG 简介 SVG 嵌入 HTML SVG 矩形 SVG 圆形 SVG 椭圆 SVG 直线 SVG 多边形 SVG 折线 SVG 路径 SVG 文本 SVG 笔触 SVG 滤镜 SVG 模糊 SVG 阴影 SVG 线性渐变 SVG 径向渐变 SVG 实例 SVG 参考手册 Canvas 教程 Canvas 简介 Canvas 绘制 Canvas 坐标 Canvas 直线 Canvas 形状 Canvas 矩形 Canvas 圆形 Canvas 曲线 Canvas 渐变 Canvas 文本 Canvas 图像 Canvas 时钟时钟简介时钟钟面时钟数字时钟指针时钟启动 HTML 游戏游戏简介游戏画布游戏组件游戏控制器游戏障碍游戏分数游戏图像游戏声音游戏重力游戏弹跳游戏旋转游戏运动 Canvas 时钟 Canvas 图像时钟钟面

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

第一部分 - 创建画布

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

HTML 代码： 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(); }

亲自试一试

代码解释

将 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(); } 另请参阅：

W3School 的完整 Canvas 参考手册

Canvas 图像时钟钟面 Canvas API

关于 W3School 帮助 W3School 使用条款隐私条款技术支持：赢科蒙ICP备06004630号

【本文地址】

公司简介

联系我们