动态环形时钟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.