使用canvas画动态时钟
Posted youwei716
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用canvas画动态时钟相关的知识，希望对你有一定的参考价值。
使用到的知识：
1. 获取系统时间
2. 画图形，空心图形，实心图形，以及其它一些属性
3. for循环
前期准备:
a. html中准备一个容器存放画布，并为其设置width，height。
<canvas id="myCanvas" width="500" height="400"></canvas>
b.在js中获取canvas画布元素，并获得其上下文，对应的方法如下：
var c = document.getElementById(‘myCanvas‘);//获取Canvas对象
var ctx = c.getContext(‘2d‘);//获取上下文
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas绘制时钟Demo</title>
<style>
#myCanvas
border: 1px solid;
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="400">
很抱歉,你的浏览器不支持canvas元素
</canvas>
<script>
var c = document.getElementById(‘myCanvas‘);//获取Canvas对象
var ctx = c.getContext(‘2d‘);//获取上下文
function drawClock()
ctx.clearRect(0,0, c.width, c.height);//清除画布
c.width = c.width;//清除画布时需要重置宽度,否则会有一个画布的重叠
var x = 250,y = 200,r = 180;//定义圆盘的中心坐标和圆盘的半径
/*获取实际的时间*/
var objTime = new Date();
var objHour = objTime.getHours();
var objMin = objTime.getMinutes();
var objSen = objTime.getSeconds();
/*将时间转换为具体的弧度*/
/*
* 因为时钟是从12点的位置算作开始,但是canvas是3点钟的位置算作0度,所以-90度指向12点方向
* 时针是每小时相隔30度,objMin/2是为了做出当分针过半时,时针也相应的处于两个小时之间
* 分针和秒针是每次相隔6度
*/
var arcHour = (-90+objHour*30 + objMin/2)*Math.PI/180;
var arcMin = (-90+objMin*6)*Math.PI/180;
var arcSen = (-90+objSen*6)*Math.PI/180;
/*绘制圆盘*/
ctx.beginPath();
for(var i=0;i<60;i++)//一共360度,一共60分钟,每分钟相隔6度,360/6=60
ctx.moveTo(x,y);
ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
ctx.closePath();
ctx.stroke();
/*绘制白盘盖住下面的线*/
ctx.fillStyle = ‘white‘;
ctx.beginPath();
ctx.arc(x,y,r*19/20,0,360*Math.PI/180,false);//半径取值为r的20分之19
ctx.closePath();
ctx.fill();
/*依葫芦画瓢,制作每一个小时的线*/
/*绘制圆盘*/
ctx.beginPath();
ctx.lineWidth = 3;
for(var i=0;i<12;i++)//一共360度,一共12个小时,每小时相隔30度,360/30=12
ctx.moveTo(x,y);
ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
ctx.closePath();
ctx.stroke();
/*绘制白盘盖住下面的线*/
ctx.fillStyle = ‘white‘;
ctx.beginPath();
ctx.arc(x,y,r*18/20,0,360*Math.PI/180,false);//半径取值为r的20分之18
ctx.closePath();
ctx.fill();
/*开始绘制时针分针和秒针,技巧就是起始弧度和结束弧度值一样*/
/*开始绘制时针*/
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineWidth = 7;
ctx.lineCap = ‘round‘;
ctx.arc(x,y,r*10/20,arcHour,arcHour,false);//半径取值为r的20分之10
ctx.stroke();
ctx.closePath();
/*开始绘制分针*/
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineWidth = 5;
ctx.lineCap = ‘round‘;
ctx.arc(x,y,r*12/20,arcMin,arcMin,false);//半径取值为r的20分之12
ctx.stroke();
ctx.closePath();
/*开始绘制秒针*/
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineWidth = 2;
ctx.lineCap = ‘round‘;
ctx.arc(x,y,r*16/20,arcSen,arcSen,false);//半径取值为r的20分之16
ctx.stroke();
ctx.closePath();
setInterval(‘drawClock()‘,1000);//每隔1秒调用绘制时钟函数
</script>
</body>
</html>
静态效果图：
以上是关于使用canvas画动态时钟的主要内容，如果未能解决你的问题，请参考以下文章