用canvas绘制一个时钟是件非常简单的事情,自己尝试用下面向对象的方式去绘制时钟,会使这段代码的复用性更好.
这是html的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas width="900" height="600" id="canvas" style="border: 1px solid #000;"></canvas>
<script src="js/bell.js"></script>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function move() {
context.clearRect(0,0,canvas.width,canvas.height);
var bell = new Bell({
time : new Date(),
bellR:300 //在这里输入时钟半径,可以决定时钟的大小
});
bell.render(context,canvas);
setTimeout(move,1000);
}
move();
</script>
</body>
</html>
这是js的文件
//首先定义一个构造函数
function Bell(option) {
this._init(option);
}
//设置这个构造函数的原型对象
Bell.prototype = {
constructor:Bell,
//接受参数
_init: function (option) {
this.sec = option.time.getSeconds()*6 ||0;
this.min = option.time.getMinutes()*6+this.sec/60 ||0;
this.hour = option.time.getHours()%12*30+this.min/60*5 ||0;
this.bellR = option.bellR ||0;
},
//绘制时钟
render: function (context,canvas) {
var cw = canvas.width;
var ch = canvas.height;
var r = this.bellR;
//钟框
context.arc(cw/2,ch/2,r,0,Math.PI*2);
context.strokeStyle = "pink";
context.lineWidth = 5;
context.stroke();
////////////////////以下元素都是按照钟的半径的比例设置的/////////////////////
//刻度
for (var i = 0; i < 60; i++) {
if(i%5==0){
context.save();
context.beginPath();
context.translate(cw/2,ch/2);
context.rotate(i*6*Math.PI/180);
context.fillStyle = "black";
context.fillRect(r*0.75-r/30,-r/60,r/30*2,r/30);
context.restore();
}else{
context.save();
context.beginPath();
context.translate(cw/2,ch/2);
context.rotate(i*6*Math.PI/180);
context.fillStyle = "black";
context.fillRect(r*0.75-r/60,-r/60,r/30,r/60);
context.restore();
}
}
//时针
context.save();
context.beginPath();
context.translate(cw/2,ch/2);
context.rotate((this.hour-90)*Math.PI/180);
context.fillStyle = "black";
context.fillRect(-r/30,-r/30,r/3*2,r/30*2);
context.restore();
//分针
context.save();
context.beginPath();
context.translate(cw/2,ch/2);
context.rotate((this.min-90)*Math.PI/180);
context.fillStyle = "black";
context.fillRect(-r/60,-r/60,r/3*2,r/30);
context.restore();
//秒针
context.save();
context.beginPath();
context.translate(cw/2,ch/2);
context.rotate((this.sec-90)*Math.PI/180);
context.fillStyle = "red";
context.fillRect(-r/120,-r/120,r/3*2,r/60);
context.restore();
}
};
这个时钟默认出现在画布的中央,根据你输入的时钟半径会有大小不同的时钟出现
可以这么小
bell1.png
可以这么大
bell2.png
画布是一个非常强大且有意思的工具,还要多加学习
