89canvas制作时钟
Posted gushixianqiancheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了89canvas制作时钟相关的知识，希望对你有一定的参考价值。
这是用html5的canvas制作的一个钟表，包含表盘、时针、分针、秒针及它们的运动；另外还添加了自动读时间的功能。
```html:run
<!doctype html>
<html>
<head>
<style>
#clock
display:block;
background:url("") no-repeat;
margin: 0 auto;
</style>
</head>
<body>
<canvas id="clock" width="500" height="500" >
您的浏览器不支持canvas标签，无法看到时钟
</canvas>
<script>
var clock=document.getElementById(‘clock‘);
var context=clock.getContext(‘2d‘);
function drawClock()
context.clearRect(0, 0, 500, 500);
function tow(n)
return n >= 0 && n < 10 ? ‘0‘ + n : ‘‘ + n;
var now = new Date();
var second = now.getSeconds();
var minute = now.getMinutes();
var hour = now.getHours();
var date = now.getDate();
var month = now.getMonth()+1;
var year = now.getFullYear();
hour = hour + minute / 60;
var hour1=hour;
hour = hour > 12 ? hour - 12 : hour;
//制作时钟外圈
context.lineWidth = 10;
context.beginPath();
context.arc(250, 270, 200, 0, 360, false);
context.stroke();
context.closePath();
//小时刻度制作
for (i = 0; i < 12; i++)
context.save();
context.lineWidth = 9;
context.strokeStyle = "red";
context.translate(250, 270);
context.rotate(i * 30 * Math.PI / 180);
context.beginPath();
context.moveTo(0, -170);
context.lineTo(0, -190);
context.stroke();
context.closePath();
context.restore();
//分钟刻度制作
for ( i = 0; i < 60; i++)
context.save();
context.lineWidth = 5;
context.strokeStyle = "blue";
context.translate(250, 270);
context.rotate(i * 6 * Math.PI / 180);
context.beginPath();
context.moveTo(0, -180);
context.lineTo(0, -190);
context.stroke();
context.closePath();
context.restore();
//钟面上表示小时的数字
for (var i = 1; i < 13; i++)
context.save();
var deg = i * Math.PI / 6;
context.translate(250, 270);
var x = Math.sin(deg);
var y = -Math.cos(deg);
context.fillStyle = "block";
context.font = "25px 宋体";
context.textAlign = "center";
context.textBaseline = "middle";
context.lineWidth=1;
context.strokeStyle="white";
context.beginPath();
context.strokeText(i, x * 155, y * 155);
context.closePath();
context.restore();
//时针制作
context.save();
context.lineWidth=7;
context.strokeStyle="#000";
context.translate(250,270);
context.rotate(hour*30*Math.PI/180);
context.beginPath();
context.moveTo(0,-110);
context.lineTo(0,10);
context.stroke();
context.closePath();
context.restore();
//分针制作
context.save();
context.lineWidth=5;
context.strokeStyle="#000";
context.translate(250,270);
context.rotate(minute*6*Math.PI/180);
context.beginPath();
context.moveTo(0,-135);
context.lineTo(0,15);
context.stroke();
context.closePath();
context.restore();
//秒针制作
context.save();//保存当前环境；
//以下是秒针的主体
context.strokeStyle="red";
context.lineWidth=3;
context.translate(250,270);
context.rotate(second*6*Math.PI/180);//秒针旋转的速度
context.beginPath();
context.moveTo(0,-170);
context.lineTo(0,20);
context.stroke();
context.closePath();
//以上是秒针的主体，以下是时针、分针、秒针的交叉点
context.beginPath();
context.arc(0,0,5,0,360,false);
context.closePath();
context.fillStyle="gray";
context.fill();
context.stroke();
//以上是时针、分针、秒针的交叉点，以下是秒针的顶端装饰。
context.beginPath();
context.arc(0,-150,5,0,360,false);
context.closePath();
context.fillStyle="gray";
context.fill();
context.stroke();
context.restore();//返回已保存过的环境。
//以下是文字报时；
context.save();
context.font="23px 楷体";
context.lineWidth=1;
context.strokeStyle="white";
context.strokeText("现在是北京时间:"+tow(year)+"年"+tow(month)+"月"+tow(date)+"日 "
+tow(Math.floor(hour1))+"时"+tow(minute)+"分"+tow(second)+"秒",5,30);
context.restore();
drawClock();
setInterval(drawClock,1000);
</script>
</body>
</html>
```
以上是关于89canvas制作时钟的主要内容，如果未能解决你的问题，请参考以下文章