用Canvas实现时钟的效果

最新推荐文章于 2022-07-07 17:35:18 发布

IT邦少

最新推荐文章于 2022-07-07 17:35:18 发布

阅读量197

点赞数

文章标签：前端 javascript canvas

本文链接：https://blog.csdn.net/qq_25972233/article/details/112055513

版权

用canvas画布实现时钟效果

相信很多学习前端的新人,学完html结构和css样式以后,都会开始学习JavaScript,在学一段JavaScript以后会接触到canvas画布部分,相信很多同学学习完以后没有很好的项目给自己能够练习,所有我在这里把代码和项目送给有需要的同学！！

前言

各位五湖四海的同学既然选择了前端开发这个行业,就努力的学下去吧,在这个行业技术不断的提高,才有可能获得你想要的报酬,废话就不多说啦,下面请用心的去理解

一、Canvas HTML的结构部分

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>canvas时钟</title>
	<style>
		canvas{
			background: #eee;
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="cvs" width="500" height="500"></canvas>
	<script src="js/index.js"></script>
</body>
</html>

二、JS部分

1.先获取属性和变量

代码如下（示例）：

var canvasDom = document.getElementById('cvs'); //获取canvas 画布 通过ID获取
var ctx = canvasDom.getContext('2d'); //获取上下文  getContext('2d') 设置绘画的环境
var width = canvasDom.width; //设置绘画的宽度
var height = canvasDom.height; //设置绘画的高度
var radius = 150; //设置圆的半径

2.平移坐标系

这个平移Canvas画布的坐标系是为了方便作画,因为Canvas的画布的起始点在(0,0)
位置

代码如下（示例）：

ctx.translate(width / 2, height / 2); //translate 平移图形

3.角度计算弧度

代码如下（示例）：

function getRadian(angle) {
	return angle * Math.PI / 180;
}

4.创建函数画圆

你要创建一个时钟的话,首先的话要利用canvas的属性画一个圆盘,先利用save()属性
保存一个绘画状态,再利用beginPath()属性开辟一个新的绘画路径,接着用arc()创建圆
代码如下（示例）：

function drawCircle() {
	//保存现场
	ctx.save(); //保存当前的绘画状态
	ctx.beginPath(); //开启一个新的路径
	ctx.arc(0, 0, radius, 0, getRadian(360)); // 用于创建圆和部分圆
	ctx.strokeStyle = '#ccc'; // 颜色
	ctx.lineWidth = 5; //线条的宽度
	ctx.stroke(); //描边画圆
	ctx.restore(); //恢复现场
}

5.画时钟的刻度

画时钟刻度这一步是比较复杂的,也是很多同学都不明白的,Canvas每次作画的时候,会先进行先保存现场save()有保存现场的功能,通过lineWidth统一设置线条宽度,通过strokeStyle设置统一的颜色,通过for循环来循环出60次的刻度

代码如下（示例）：

function drawMarks() {
	ctx.save(); //保存现场
	ctx.lineWidth = 6; //统一设置线条宽度
	ctx.strokeStyle = '#aaa'; //统一设置线条颜色
	for (var i = 0; i < 60; i++) {
		ctx.save();
		//旋转画布
		ctx.rotate(getRadian(6 * i)); //旋转
		ctx.moveTo(0, -radius + 10);

		if (i % 5 === 0) {
			ctx.lineTo(0, -radius + 30);
		} else {
			ctx.lineTo(0, -radius + 20);
		}

		ctx.lineCap = "round" //末端设置为圆形
		ctx.stroke();
		ctx.restore(); //恢复现场
	}
	ctx.restore();
}

6.设置时针的属性

代码如下（示例）：

function drawLine(lineWidth, color, length, angle) {
	ctx.save();
	ctx.beginPath(); //开启一个新的路径
	ctx.strokeStyle = color; //设置颜色
	ctx.lineWidth = lineWidth;
	ctx.lineCap = "round" //设置末端
	ctx.rotate(getRadian(angle));

	ctx.moveTo(0, 0.1 * length);
	ctx.lineTo(0, -0.9 * length);
	ctx.stroke();
	ctx.restore();
}

7.生成当前时间

要在时钟当中获取到当前时间的话,要先获取当前时间,再获取凌晨的时间

代码如下（示例）：

function drawKLines() {
	var now = new Date(); ///当前时间
	//今天凌晨的时间
	var zero = new Date(now.getFullYear(), now.getMonth(), now.getDate());
	//今天流程到现在,经过的毫秒数
	var milis = now.getTime() - zero.getTime();
	//今天流程到现在,经过的毫秒数
	var seconds = Math.floor(milis / 1000);
	//画时钟
	//经过的小时数
	var hAngle = seconds / 60 / 60 / 12 * 360;
	drawLine(6, 'red', 70, hAngle);

	var mAngle = seconds / 60 / 60 * 360;
	drawLine(5, "blue", 90, mAngle);

	var sAngle = seconds / 60 * 360;
	drawLine(3, 'yellow', 100, sAngle);
}

drawKLines();

8.运行函数

在上面我们创建和生成的函数都没有去运行,到最后一步我们要创建一个函数,去运行上面的函数,运行函数我们需要清除画布一次,然后再从新开始作画

function draw() {
	//清空画布
	ctx.clearRect(-width / 2, -height / 2, width, height);
	//重新画
	drawCircle();
	drawMarks();
	drawKLines();
}
draw();

setInterval(draw, 1000);  //这里创建一个定时器的原因,是让这个函数每一秒去运行

总结

我是本次的主编,邦少,第一次写文章,也不知道写什么,往各位同学不要见怪,我会继续努力的,也祝各位也在学习前端的道路上更上一层楼,要想拿源码的同学,私聊评论.前端的学习没有什么捷径,只有不断的去练习去提升,才能让自己在未来的工作上换得更加高的报酬。希望大家能坚持下去,一起加油

IT邦少

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Canvas实现时钟的效果

用canvas画布实现时钟效果相信很多学习前端的新人,学完html结构和css样式以后,都会开始学习JavaScript,在学一段JavaScript以后会接触到canvas画布部分,相信很多同学学习完以后没有很好的项目给自己能够练习,所有我在这里把代码和项目送给有需要的同学！！前言各位五湖四海的同学既然选择了前端开发这个行业,就努力的学下去吧,在这个行业技术不断的提高,才有可能获得你想要的报酬,废话就不多说啦,下面请用心的去理解一、Canvas HTML的结构部分<!DOCTYPE h
复制链接

扫一扫