您的位置：首页 > Web前端 > HTML5

HTML5 canvas 实现小时钟

2014-03-15 19:48 162 查看

正在看HTML5的相关内容，这个是关于canvas应用的小程序

canvas画图很强大，就类似于自己用圆规直尺在画板上画图一样

写的时候参照了网上其他代码，比如擦除表针要上下左右多擦除两个像素

写完之后才发现自己定义的needle类里面的rect()没写好，代码重用率低了，如果还有什么其他问题，欢迎指出

不罗嗦，放代码

index.html:

<!DOCTYPE HTML>
<html>
<head>
<title>
My canvas
</title>
</head>
<body>
<canvas id = "drawing" width = "400" height = "400">
Your browser doesn't support canvas!
</canvas>
<p id = "Date"></p>
<script type="text/javascript" src="js/Canvas.js"></script>
</body>
</html>

Canvas.js:

var c = document.getElementById("drawing");
var date = document.getElementById("Date");
var clock={
pan : {
panRect : function(cxt){
cxt.beginPath();
cxt.arc(0,0,100,0,2*Math.PI,true);
cxt.stroke();
cxt.closePath();
},
numRect : function(cxt){
cxt.beginPath();
for (var i = 0; i <60; i++){
if(i % 5 == 0){
if(i % 15 ==0){
cxt.fillRect(80,-4,20,8);
}
else
cxt.fillRect(84,-3,16,6);
}else{
cxt.fillRect(90, -1, 10, 2);
}
cxt.rotate(2 * Math.PI/60);
}
cxt.closePath();
},
init:function(cxt){
this.panRect(cxt);
this.numRect(cxt);
}
},
needle:{
s : {
angle : 0,
len : 80,
color : '#00ff00',
rect : function(cxt,time){
cxt.restore();
cxt.save();
cxt.rotate(this.angle);
cxt.clearRect(-13, -2, this.len + 2, 4);//要擦多两个像素
cxt.restore();
cxt.save();
this.angle = (time.getSeconds()+time.getMilliseconds()/1000)* Math.PI / 30;//2 * Math.PI / 60
cxt.rotate(this.angle);
cxt.fillStyle=this.color;
cxt.fillRect(-12,-1, this.len , 2);
}
},
m : {
angle : 0,
len : 70,
color : '#ff0000',
rect : function(cxt,time){
cxt.restore();
cxt.save();
cxt.rotate(this.angle);
cxt.clearRect(-13, -3, this.len + 2, 6);
cxt.restore();
cxt.save();
this.angle = (time.getSeconds()/60 + time.getMinutes()) * Math.PI / 30;
cxt.rotate(this.angle);
cxt.fillStyle=this.color;
cxt.fillRect(-12,-2, this.len , 4);
}
},
h : {
angle : 0,
len : 60,
color : '#0000ff',
rect : function(cxt,time){
cxt.restore();
cxt.save();
cxt.rotate(this.angle);
cxt.clearRect(-13, -4, this.len + 2, 8);
cxt.restore();
cxt.save();
this.angle = (time.getMinutes()/60 + time.getHours()*5) * Math.PI / 30;
cxt.rotate(this.angle);
cxt.fillStyle=this.color;
cxt.fillRect(-12,-3, this.len , 6);
}
},
tickTack : function(cxt){
var time = new Date();
this.h.rect(cxt,time);
this.m.rect(cxt,time);
this.s.rect(cxt,time);
date.innerHTML=time;
}
},
init : function(cxt){
cxt.translate(200,200);
cxt.rotate(-Math.PI / 2);
cxt.save();
with(clock){
pan.init(cxt);
var MyInterval = setInterval("clock.needle.tickTack(cxt)", 10);
}
}
};
if(c.getContext){
var cxt = c.getContext("2d");
cxt.strokeRect(0,0,c.width,c.height);
clock.init(cxt);
}

最终效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航