【基础知识】HTML5 Canvas小项目时钟的简单实现（图文、演示）

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

分析

使用Canvas实现时钟，需要关注几个部件。

画时钟的轮廓
画时钟上的数字
画时钟上的时针、分针、秒针
画时钟上的中心点
实现每秒钟画布变化一次

核心

由于是Canvas实现的，需要对画布上的元素进行准确定位，例如每个数字对应在钟表上的位置，为了实现更加美观的效果，我们会用到三角函数等。

代码实现

用到的Canvas的API

arc()

beginPath()

clearPath()

fill()

fillText()

lineT0()

moveTo()

stroke()

全部代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas时钟</title>
</head>
<body>
<canvas id="canvas" height="500" width="500">Canvas不支持。</canvas>
</body>
<script>var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),//字体高度FONT_HEIGHT = 15,//外边距MARGIN = 35,//时钟半径（留出外边距放数字）RADIUS = canvas.width/2-MARGIN,//分针和秒针的截断长度HAND_TRUNCATION = canvas.width/25,//时针截断长度HOUR_HAND_TRUNCATION = canvas.width/10,//数字空隙NUMERAL_SPACING = 20,//指针的全长度HAND_RADUIS = RADIUS + NUMERAL_SPACING;//方法……/*** 绘制一个钟面的圆形*/function drawCircle() {//开始定义路径context.beginPath();//创建一个圆形路径context.arc(canvas.width / 2, canvas.height / 2, RADIUS,0,Math.PI*2,true);context.stroke();}/*** 绘制时钟周围的数字*/function drawNumerals() {var numerals = [1,2,3,4,5,6,7,8,9,10,11,12],angle = 0,numeralWidth = 0;numerals.forEach(function (numeral) {//设置每个数字的角度。注意：数字3是0度angle = Math.PI/6*(numeral-3);//在向画布输出之前，以像素度量各数字的宽度numeralWidth = context.measureText(numeral).width;//利用三角函数，填充每个数字到对应位置context.fillText(numeral,canvas.width/2+Math.cos(angle)*(HAND_RADUIS)-numeralWidth/2,canvas.height/2+Math.sin(angle)*(HAND_RADUIS)+FONT_HEIGHT/3);})}/*** 绘制时钟中心的实心圆*/function drawCenter() {context.beginPath();context.arc(canvas.width / 2, canvas.height / 2, 5,0, Math.PI * 2, true);context.fill();}/*** 绘制某个钟表的指针的通用方法* @param loc* @param isHour*/function drawHand(loc, isHour) {//设置指针角度var angle = (Math.PI*2)*(loc/60)-Math.PI/2,//判断哪个指针handRadius = isHour? RADIUS-HAND_TRUNCATION-HOUR_HAND_TRUNCATION:RADIUS-HAND_TRUNCATION;context.moveTo(canvas.width / 2, canvas.height / 2);context.lineTo(canvas.width/2+Math.cos(angle)*handRadius,canvas.height/2+Math.sin(angle)*handRadius);context.stroke();}/*** 以当前时间绘制钟表的三个表针，实现drawHand方法*/function drawHands() {var date = new Date,hour = date.getHours();console.log(date.getHours()+'、'+date.getMinutes()+'、'+date.getSeconds());//24小时制转化为12小时制hour = hour>12?hour-12:hour;//为了满足drawHand()中loc/60以平均角度的操作，需要将时针*5。因为12*5=60，可以当成分针/秒针进行调用函数drawHand(hour*5+(date.getMinutes()/60)*5,true);drawHand(date.getMinutes(),false);drawHand(date.getSeconds(),false);}/*** 画出当前时刻钟表的各个组件*/function drawClock() {//清空全部canvas的像素内容context.clearRect(0,0,canvas.width,canvas.height);drawCircle();drawCenter();drawHands();drawNumerals();}//Initialization------初始化context.font = FONT_HEIGHT+'px Arial';loop = setInterval(drawClock,1000);</script>
</html>

演示链接

https://827652549.github.io/Canvas/Unit1/Clock.html

【基础知识】HTML5 Canvas小项目时钟的简单实现（图文、演示）相关推荐

【文本】HTML5 Canvas小项目：为坐标轴添加数字标签（带刻度线）
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...
html5网站粒子时钟,Html5 canvas实现粒子时钟的示例代码
这篇文章主要介绍了Html5 canvas实现粒子时钟的示例代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 我们先看看粒子时钟的效果,如下: 下面我们将通过canvas和js实 ...
图像处理基础知识系列之五：贝叶斯方法简单梳理
图像处理基础知识系列之五:贝叶斯方法简单梳理文章来源: 刘未鹏数学之美番外篇:平凡而又神奇的贝叶斯方法(作者是个技术兼心理学 ...
【前端基础知识笔记】【项目导向型】（持续更新中）
我在做项目的过程中,学习了一些前端基础知识.为了方便以后的查询,将这些知识集中在这篇博客中,方便以后的查询. 注意!这些知识是不成体系的,因为我只是按照遇到的先后顺序记载于此.这是为了方便结合项目开发 ...
【机器学习基础】四个小项目完全解读支持向量机
支持向量机算法的基础是最大间隔分类器,最大间隔分类器虽然很简单,但不能应用于大部分数据,因为大部分属是非线性数据,无法用线性分类器进行分类,解决方案是对特征空间进行核函数映射,然后再运行最大间隔分类器 ...
python3 django开发_python3开发进阶-Django框架学习前的小项目（一个简单的学员管理系统）...
''' 自己独立写一个学员管理系统表结构: 班级表: -id -grade_name 学生表: -id -student_name -grade 关联外键班级表老师表: -id -teacher_ ...
【uni-app】详细总结uni-app基础知识和如何配置项目，运行到模拟器和小程序端，附案例和图（建议收藏）
1- uni-app 简介 1.1 介绍 uni-app 是一个使用 Vue.js 开发所有前端应用的框架. 开发者编写一套代码,可发布到 iOS.Android.H5.以及各种小程序(微信/支付宝/ ...
Django框架基础知识汇总（有项目版）
Web框架本质## web系统概念 1. Http,无状态,短连接 2. 浏览器(socket客户端).网站(socket服务端) web框架本质 import socket def handle_r ...
数字时钟html5 js,html5 canvas js(数字时钟)实例代码
canvas dClock 您的浏览器太古董了,升级吧! var clock = document.getElementById("clock"); var cxt = clock ...

【基础知识】HTML5 Canvas小项目时钟的简单实现（图文、演示）

分析

核心

代码实现

演示链接

https://827652549.github.io/Canvas/Unit1/Clock.html

【基础知识】HTML5 Canvas小项目时钟的简单实现（图文、演示）相关推荐

最新文章

热门文章