怎么用canvas画秒针_基于canvas的简易时钟实践

最近闲下来，开始了HTML5的入门之旅。跟着某视频(避免广告嫌疑)做了两个简单的canvas例子。此处为简易时钟实例。

PS: 例子为实验性例子，欢迎批判~~~~

一、实现逻辑

1、先画出表盘：最外端的圆、时刻度、分秒刻度

2、使用canvas的画布旋转，分别画出时针、分针、秒针(含秒针外端圆点)

3、定时清空画布，并重新绘制时针。

二、代码展示

1、效果图

2、以下为代码：

Canvas-时钟

您的浏览器不支持canvas标签！

//获取画布DOM

var dCanvas = document.getElementById('clock');

//设置绘图环境.注意只能用小写“2d”

var paper = dCanvas.getContext('2d');

var CX=250,CY=250;

//画表盆(蓝色)

clockHandler();

window.setInterval(clockHandler,1000);

function drawClockBg(_paper){

_paper.lineWidth=10;

_paper.strokeStyle="blue";

_paper.beginPath();

_paper.arc(CX,CY,200,0,360,false);//最后一个参数，表示是否顺时针画

_paper.stroke();

_paper.closePath();

};

/**

*画时针刻度

*

**/

function drawClockHour(_paper){

for(var i=0;i<12;i++){

_paper.save();

_paper.strokeStyle="black";

_paper.translate(CX,CY);

_paper.rotate(i*30*Math.PI/180);

_paper.beginPath();

_paper.moveTo(0,-175);

_paper.lineTo(0,-195);

_paper.stroke();

_paper.closePath();

_paper.restore();

}

};

/**

*画秒/分刻度

*

**/

function drawClockSecond(_paper){

for(var i=0;i<60;i++){

if(i%5===0)continue;

_paper.save();

_paper.lineWidth=4;

_paper.strokeStyle="black";

_paper.translate(CX,CY);

_paper.rotate(i*6*Math.PI/180);

_paper.beginPath();

_paper.moveTo(0,-185);

_paper.lineTo(0,-195);

_paper.stroke();

_paper.closePath();

_paper.restore();

}

};

/**

*画时针

**/

function drawClockHourLine(_paper,_hour){

_paper.save();

_paper.lineWidth=10;

_paper.strokeStyle="black";

_paper.translate(CX,CY);

_paper.rotate(_hour*30*Math.PI/180);

_paper.beginPath();

_paper.moveTo(0,-85);

_paper.lineTo(0,5);

_paper.stroke();

_paper.closePath();

_paper.restore();

};

/**

*画分针

**/

function drawClockMinuteLine(_paper,_minute){

_paper.save();

_paper.lineWidth=6;

_paper.strokeStyle="black";

_paper.translate(CX,CY);

_paper.rotate(_minute*6*Math.PI/180);

_paper.beginPath();

_paper.moveTo(0,-125);

_paper.lineTo(0,10);

_paper.stroke();

_paper.closePath();

_paper.restore();

};

/**

*画秒针

**/

function drawClockSecondLine(_paper,_second){

_paper.save();

_paper.lineWidth=3;

_paper.strokeStyle="red";

_paper.translate(CX,CY);

_paper.rotate(_second*6*Math.PI/180);

//秒针线

_paper.beginPath();

_paper.moveTo(0,-185);

_paper.lineTo(0,15);

_paper.stroke();

_paper.closePath();

//初始化秒针圆点

drawBaseCircle(_paper,0,-160,"yellow");

_paper.restore();

};

/**

*画圆点 表盘圆点、秒针外端圆点

**/

function drawBaseCircle(_paper, _x, _y , fs){

if(typeof fs == 'undefined') fs = "gray";

_paper.beginPath();

_paper.fillStyle=fs;

_paper.arc(_x,_y,5,0,360,false);

_paper.fill();

_paper.closePath();

}

/**

*定时处理时钟指针

**/

function clockHandler(){

//清空已画的内容

paper.clearRect(0,0,500,500);

//画表盆(蓝色)

drawClockBg(paper);

//画时刻度

drawClockHour(paper);

//画秒刻度

drawClockSecond(paper);

//初始化时间

var nowDate = new Date();

//获取当前时间的小时数

var hour = (nowDate.getHours()%12) + parseFloat(nowDate.getMinutes()/60,2);

//获取当前时间的分钟数

var minute = nowDate.getMinutes() + parseFloat(nowDate.getSeconds()/60,2);

//获取当前时间的秒数

var second = nowDate.getSeconds();

//初始化时针

drawClockHourLine(paper,hour);

//初始化分针

drawClockMinuteLine(paper,minute);

//初始化秒针

drawClockSecondLine(paper,second);

//初始化中心圆点

drawBaseCircle(paper,CX,CY);

};

三、后记

1、代码在FireFox 32.0.3上，测试无误！