通过Canvas + JS 实现简易时钟实战
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过Canvas + JS 实现简易时钟实战相关的知识，希望对你有一定的参考价值。
最近通过各种渠道学习了下html5中的canvas元素，为了练练手就随手写了一个简易的时钟。时钟本身不复杂，没有使用图片进行美化，下面就与大家分享一下具体的代码：
这是最终实现的效果：
部分的启发点来自于 http://developer.51cto.com/art/201503/467645.htm
html代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Clock</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.canvas{
margin-left: 20px;
margin-top: 20px;
}
</style>
</head>
<body onload="main()">
<canvas class = "canvas" id="canvasId" width = ‘400‘ height = ‘400‘></canvas>
</body>
js代码：
var Clockbox = function(obj,width,height){
this.o = {
‘dates‘:[], //时间
‘obj‘:obj, //canvas对象
‘width‘:width, //canvas宽度
‘height‘:height, //canvas高度
‘obj2d‘:obj.getContext(‘2d‘), //2d对象
‘wcolor‘:‘#000000‘, //线条颜色
‘scalewidth‘:30, //刻度长度
‘msradius‘:(1/30)*Math.PI, //分秒的弧度
‘hsradius‘:(1/6)*Math.PI, //时的弧度
‘hourHandLength‘ : (width/5), /*时针长度*/
‘minHandLength‘:(width/6*1.8), /*分针长度*/
‘secHandLength‘:(width/20*8), /*秒针长度*/
‘fontsize‘:30 //数字大小
}
var _this = this;
this.infn();
setInterval(function(){
_this.o.obj2d.translate(-_this.o.width/2,-_this.o.height/2);
_this.o.obj2d.clearRect(0,0,_this.o.width,_this.o.height);
_this.infn();
},1000)
}
Clockbox.prototype = {
infn:function(){
//表盘
var obj2d = this.o.obj2d;
var dates = new Date();
this.o.dates = [dates.getHours(),dates.getMinutes(),dates.getSeconds()];
//绘制
obj2d.beginPath();
obj2d.arc(this.o.width/2,this.o.height/2,this.o.width/2,0,2*Math.PI,false);
obj2d.strokeStyle = this.o.wcolor;
obj2d.stroke();
//刻度
this.scalefn(obj2d);
//时针
this.hour(obj2d);
//分针
this.minute(obj2d);
//秒针
this.sec(obj2d);
},
//绘制刻度和指针
scalefn:function(obj2d){
obj2d.translate(this.o.width/2,this.o.height/2);
for(var i = 0;i<12;i++){
obj2d.moveTo(this.o.width/2-this.o.scalewidth, 0);
obj2d.lineTo(this.o.width/2, 0);
obj2d.rotate(this.o.hsradius);
}
obj2d.font = "bold "+this.o.fontsize+"px impack";
obj2d.textAlign = "center";
obj2d.fillStyle = "#ff9000";
obj2d.fillText("12",0,-((this.o.width/2)-(this.o.scalewidth*2+10)));
obj2d.fillText("3",((this.o.width/2)-(this.o.scalewidth*2)),this.o.fontsize/3);
obj2d.fillText("6",0,((this.o.width/2)-(this.o.scalewidth*2)));
obj2d.fillText("9",-((this.o.width/2)-(this.o.scalewidth*2)),this.o.fontsize/3);
obj2d.stroke();
obj2d.restore();
},
//时针
hour:function(obj2d){
obj2d.save();
obj2d.rotate(this.o.hsradius*Number(this.o.dates[0]));
obj2d.moveTo(0,0);
obj2d.lineTo(0,-this.o.hourHandLength);
obj2d.stroke();
obj2d.restore();
},
//分针
minute:function(obj2d){
obj2d.save();
obj2d.rotate(this.o.msradius*Number(this.o.dates[1]));
obj2d.beginPath();
obj2d.moveTo(0,0);
obj2d.lineTo(0,-this.o.minHandLength);
obj2d.stroke();
obj2d.restore();
},
//秒针
sec:function(obj2d){
obj2d.save();
obj2d.rotate(this.o.msradius*Number(this.o.dates[2]));
obj2d.beginPath();
obj2d.moveTo(0,0);
obj2d.lineTo(0,-this.o.secHandLength);
obj2d.stroke();
obj2d.restore();
}
}
function main(){
var can = document.getElementById(‘canvasId‘);
var Clock = new Clockbox(can,400,400);
}
js代码详解：
1.首先这里使用了面向对象的形式
2.这里为了方便更改大小，传入了3个参数 obj，width，height，分别表示canvas元素 以及它的宽度和高度，表盘的半径是宽的二分之一
3. 因为1小时有60分钟 所以每一个分钟单元格应该有的弧度就是(1/（60/2）)*Math.PI，小时同理
4. 依据现在的时间 用 .rotate（）方法对指针做角度控制 12点的时针的弧度就是 一个小时的弧度*12
5.最后每秒不断的清除画布 重构 就形成了一个动态的时钟
遇到的问题：
translate（） 在画完之后 canvas的原点并不在左上角了 ..... 最后在定时器重新设定解决了这个问题
以上是关于通过Canvas + JS 实现简易时钟实战的主要内容，如果未能解决你的问题，请参考以下文章