h5 Canvas时钟制作
Posted suwu150
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5 Canvas时钟制作相关的知识，希望对你有一定的参考价值。
canvas可以说是html5中最强大的元素之一下面我们就使用canvas来进行绘制一个时钟
在绘制之前,我们需要知道需要绘制的元素都有哪些,其中包括钟最外边的圆圈、钟表上的数字、钟表上的指针、定时器元素
下面确定使用的html页面:
1.h5Clock.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>a sample canvas example</title>
<style>
body
background: #dddddd;
#canvas
margin: 10px;
padding: 10px;
background: #ffffff;
border: thin inset #aaaaaa;
</style>
</head>
<body>
<canvas id="canvas" width="350" height="350">
canvas not supported
</canvas>
</body>
</html>
在上面代码中,我们使用了canvas标签进行确定布局,使其id=“canvas”,width、height分别为350,其中具体的逻辑,我们在h5Clock.js代码中进行编写,具体内容如下所示:
2.首先我们需要进行初始化常量如下:
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d'),
FONT_HEIGHT = 15,
MARGIN = 35,
HAND_TRUNCATION = canvas.width / 25,
HOUR_HAND_TRUNCATION = canvas.width / 10,
NUMERAL_SPACING = 20,
RADIUS = canvas.width / 2 - MARGIN,
HAND_RADIUS = RADIUS + NUMERAL_SPACING;
现在就可以进行绘制具体内容了,我们先进行绘制两个圆,一个是钟表的外边框,一个是钟表中间的圆心点
3.绘制钟表边框和圆心
// 绘制表示钟面的
function drawCircle()
context.beginPath(); // 开始定义某一段路径
context.strokeStyle = 'red';
context.arc(canvas.width / 2, canvas.height / 2, RADIUS, 0, Math.PI * 2, true);
context.stroke(); // 进行描绘路径的边缘
/* context.fill() */;
// 绘制圆心点
function drawCenter()
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, 5, 0, Math.PI * 2, true);
/* context.stroke() */;
context.fill();
在方法drawCircle、drawCenter中,使用属性分别如下:
beginPath // 开始描绘路径的边缘,也就是线条的起点
strokeStyle // 描绘时所需要的样式
arc // 进行绘制图形圆,其x,y坐标分别为canvas元素的一半,绘制范围是(0, Math.PI * 2)
stroke // 进行填充内容,对上面确定的图形填充颜色描绘路径的边缘
在绘制圆形表盘时,先调用beginPath()方法进行定义路径,然后再调用arc()方法创建一个圆形的路径,等到调用了stroke()方法之后,刚才定义的路径才能够变得可见,同样在绘制圆心的时候,也是使用同样的方法,只是在使用fill()方法进行填充成实心圆
4.绘制钟表上面的数字
function drawNumberals()
const numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
let angle = 0;
let numerWidth = 0;
numerals.forEach(function(numeral)
angle = Math.PI / 6 * (numeral - 3);
numerWidth = context.measureText(numeral).width;
context.fillStyle = 'cornflowerblue';
context.fillText(numeral, canvas.width / 2 + Math.cos(angle) * (HAND_RADIUS) - numerWidth / 2, canvas.height / 2 + Math.sin(angle) * (HAND_RADIUS) + FONT_HEIGHT / 3);
);
在方法drawNumberals中,使用属性分别如下:
measureText // 在画布上输出文本之前，检查字体的宽度,measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。
fillStyle // 表示填充的样式,在这里我们使用cornflowerblue颜色进行填充字体
fillText // fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。但是由于我们指定了fillStyle会有所改变,在fillText中通常会有4个参数,分别是规定在画布上输出的文本、开始绘制文本的 x 坐标位置（相对于画布）、开始绘制文本的 y坐标位置（相对于画布）、允许的最大文本宽度，以像素计
5.绘制指针
由于指针的绘制方法大致一样,都是线段,因此我们进行统一的处理,先定义绘制线段的方法,再分别根据时分秒进行区别调用
function drawHand(loc, isHour)
let 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();
function drawHands()
let date = new Date(),
hour = date.getHours();
hour = hour > 12 ? hour - 12 : hour; // 计算小时时间,采用12进制时需要计算
// 进行绘画指针-包括时针、分针、秒针
drawHand(hour * 5 + (date.getMinutes() / 60) * 5, true);
drawHand(date.getMinutes(), false);
drawHand(date.getSeconds(), false);
在绘制指针中,使用属性分别如下:
moveTo // 将画笔移动到canvas指定位置
lineTo // 在该点与指定点之间绘制一条不可见的路径
stroke // 进行填充,使得路径可见
在绘画指针时,先调用moveTo方法将制定移动到canvas指定位置,然后再调用lineTo方法,在该点与另外一个指定点之间绘制一条不可见的路径,最后使用stroke方法进行填充,使得路径可见
6.设置定时器,进行绘制实时钟表时间
function drawClock()
context.clearRect(0, 0, canvas.width, canvas.height);
drawCircle();
drawCenter();
drawHands();
drawNumberals();
// 初始化
context.font = FONT_HEIGHT + 'px Arial';
loop = setInterval(drawClock, 1000);
使用属性如下:
clearRect() //方法清空给定矩形内的指定像素,该方法包含4个参数,分别是要清除的矩形左上角的 x 坐标,要清除的矩形左上角的 y 坐标,要清除的矩形的宽度，以像素计,要清除的矩形的高度，以像素计,在这里我们使其坐标为(0,0),进行清楚canvas的宽高.
通过使用setInterval进行实现动画效果,每秒钟进行一次drawClock方法调用,并且在每次调用之前,使用clearRect属性进行清除canvas上一秒界面
7.实现的完整效果如下所示:
参考文档:
以上是关于h5 Canvas时钟制作的主要内容，如果未能解决你的问题，请参考以下文章