web前端动态环形时钟demo练习

最新推荐文章于 2022-08-19 13:44:50 发布

Y_qilin_

最新推荐文章于 2022-08-19 13:44:50 发布

阅读量477

点赞数 1

文章标签： javascript css html5 前端 html

本文链接：https://blog.csdn.net/Y_qilin_/article/details/106235022

版权

这篇博客展示了如何利用HTML5 canvas、CSS和JavaScript创建动态环形时钟的demo。主要内容包括canvas画布的使用、日期对象处理、颜色环形渐变填充以及定时器的应用。文中提供HTML结构、CSS样式和JavaScript行为的详细步骤，并邀请读者提出反馈和改进建议。

摘要由CSDN通过智能技术生成

动态环形时钟

动态环形时钟demo练习

动态环形时钟demo练习

本篇文章用到的知识点包括canvas画布及画笔使用、css绝对定位居中布局、日期对象的使用、颜色环形渐变填充以及定时器函数的使用等知识点。欢迎各位读者下方评论中指出文章错误或提出改进意见

若js函数中有笔者未说明的或为还有未清楚的问题可自行查阅w3cschool标准
附上链接 link.

结构（HTML）

结构非常简单，只在canvas画布上操作即可,给画布一个500*500的大小

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta http-wquiv="x-UA-Compatible" content="ie=edge">
	<title>环形时钟</title>
</head>
<body>
	<canvas width="500" height="500" id="myCanvas"></canvas>
</body>
</html>

样式（CSS）

给canvas加上一个外边框方便观察。设置绝对定位position: absolute;(absolute的定位原则是相对最近有定位父级元素，body并未进行样式设置，所以canvas定位相对于viewport进行定位)top和left表示距离上左边50%，是canvas的上左边距离浏览器视窗的上左边进行定位，因为canvas有长和宽所以要分别向上和左移动自身长和宽的一半距离（margin-top和margin-left），此时的canvas才算居中

	canvas{
   
		border:1px solid #000;
		position:absolute;
		top:50%;
		left:50%;
		margin-top:-250px;
		margin-left:-250px;
	}

行为（JavaScript）

首先通过DOM操作根据id获取canvas元素，然后创建画笔，再设置画笔的颜色，粗细和宽度

var myCanvas = document.getElementById('myCanvas');
//取到上下文对象 画笔
var ctx = myCanvas.getContext('2d');
//画笔颜色 宽度 粗细
ctx.strokeStyle = '#00ffff';
ctx.lineWidth = 17;
ctx.shadowBlur = 15;
ctx.shadowColor = '#00ffff';

创建主函数，通过日期对象获取日期然后给canvas填充颜色渐变的背景。用画笔画出代表时分秒的圆弧，再将获取到的日期填充到canvas中。圆弧与时间之间产生的联系是将时间置为圆弧结束角度中的变量，在更新变量以达到动态效果（函数参数的意义请看代码注释）

绘制圆弧时。起始角度和结束角度都应从270度开始算起，所以下方arc函数中的结束角度才会减去90

function renderTime(){
   
	//获取当前时间
	var date = new Date();
	var today = date.

最低0.47元/天解锁文章

Y_qilin_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端动态环形时钟demo练习

动态环形时钟动态环形时钟demo练习结构（HTML）样式（CSS）行为（JavaScript）动态环形时钟demo练习本篇文章用到的知识点包括canvas画布及画笔使用、css绝对定位居中布局、日期对象的使用、颜色环形渐变填充以及定时器函数的使用等知识点。欢迎各位读者下方评论中指出文章错误或提出改进意见若js函数中有笔者未说明的或为还有未清楚的问题可自行查阅w3cschool标准附上链接 link.结构（HTML）结构非常简单，只在canvas画布上操作即可,给画布一个500*500的大小&l
复制链接

扫一扫