怎么用canvas画秒针_html5入门：教你用canvas写一个时钟

今天的时间比较充裕，心血来潮，为大家分享一个html5的小例子，希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例，希望对你们的学习有帮助！高手嘛！请跳过吧！

好了，闲话少数，先看看一下我们的案例效果图吧！

哦哦，我的时间暴露了！效果很粗糙，没有美化，有兴趣的朋友可以写的好看一点！

好了， 这是用什么写的呢，这大家都知道，肯定是html5 的canvas标签和js共同完成的啦，利用canvas的绘图的属性画一个一个的形状，现在就跟我一起画吧！

分析：时钟包括  表盘，小时刻度，分钟刻度，时针，分针，秒针

首先当然是html5声明，声明很简单，就一行：

doctype可与的大写，也可以是小写，也可以是大小写，这都无所谓，看你自己的习惯(不区分大小写)；头部我就不写了，我会将源码附到下面，为节约时间，我就开始讲正文，头部也没什么好将的

您的浏览器当前版本不支持canvas表签

在body里面写一个canvas标签，设置宽高为500,500(ps:设置宽高时建议按照上面的写法给，不是说在样式表里面不能给，在样式表里面给宽高，在绘图时图形的位置会出错)，背景颜色设为黄色；

开始绘图了：

//获取画布DOM 还不可以操作

var canvas = document.getElementById('canvas');//设置绘图环境

var cxt = canvas.getContext('2d');

先获取canvas DOM, 设置绘图环境，目前还只有2d；

(为节省版面，js部分拆分的部分不加script标记了)

画表盘：

//表盘(蓝色)

cxt.beginPath(); //画笔开始

cxt.lineWidth = 5; //设置画笔的线宽

cxt.strokeStyle="blue"; //设置画笔的颜色

cxt.arc(250,250,200,0,360,false); //绘制圆形，坐标250,250 半径200，整圆(0-360度)，false表示顺时针

cxt.stroke(); //绘图

cxt.closePath(); //结束画布

写有注释，看得懂不，解释一下，画形状一般都需要写一个开始画笔和结束画布，你自己写一下，看看效果你就知道了，这是画的空心圆，效果是这样的：

然后我们开始画刻度，刻度有小时刻度和分针刻度，先画小时刻度吧：

//时针刻度

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

cxt.save();//设置旋转环境//设置时针的样式

cxt.lineWidth=7;

cxt.strokeStyle="#000";

cxt.translate(250,250);//设置异次元空间的原点

cxt.rotate(30*Math.PI/180);//设置旋转角度

cxt.beginPath(); //画笔开始

cxt.moveTo(0,-170); //画线， 从坐标0，-170开始

cxt.lineTo(0,-190); //到坐标0，-190结束

cxt.stroke(); //绘图

cxt.closePath();

cxt.restore();//将旋转之后的元素放回原画布

}

因为小时刻度是要在表盘上旋转分布的，所以我们要设一个中心原点，以原点为中心，表针可以旋转指向某个时刻，当然，刻度不只有一个，所以我们用for循环的方式，画出12条线段，旋转角度说明一下，弧度 = 角度*Math.PI/180,要是你有兴趣，可以查一下这是怎么来的(数学里有)，一周有12个刻度，一个刻度就是30°；

效果如图：

画分刻度，原理跟时刻的是一样的，只是角度不一样：

//分针刻度

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

cxt.save();

cxt.lineWidth=5;

cxt.strokeStyle="#000";

cxt.translate(250,250);

cxt.rotate(6*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-180);

cxt.lineTo(0,-190);

cxt.stroke();

cxt.closePath();

cxt.restore();

}

注释就不写了，跟上面的是一样的

效果如图：

现在开始画指针了，先画时针吧：

//时针

cxt.save(); //设置旋转环境//时针样式

cxt.lineWidth = 7;

cxt.strokeStyle="#000";

cxt.translate(250,250); //设置异次元空间原点

cxt.rotate(30*Math.PI/180); //设置旋转角度

cxt.beginPath(); //画笔开始

cxt.moveTo(0,-140); //画线， 从坐标0，-140开始

cxt.lineTo(0,10); //到坐标0，10结束

cxt.stroke(); //绘图

cxt.closePath(); //结束画布

cxt.restore(); //将旋转之后的元素放回原画布

时针现在实际上就是画一个直线，因为要旋转，所以是在异次元空间设置原点

效果如图：

那分针和秒针就一样一样的了，稍微给点变化，比如给长一点，指针细一点

//分针

cxt.save();//分针样式

cxt.lineWidth = 5;

cxt.strokeStyle="#000";

cxt.translate(250,250);

cxt.rotate(6*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-160);

cxt.lineTo(0,15);

cxt.stroke();

cxt.closePath();

cxt.restore();

对照时针看注释，这里就不写注释了

效果如图：

现在写分针：

//秒针

cxt.save();

cxt.lineWidth= 3;

cxt.strokeStyle="#f00";

cxt.translate(250,250);

cxt.rotate(60*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-185);

cxt.lineTo(0,20);

cxt.stroke();

cxt.closePath();

效果如图：

到此为止，这个时钟的图就画出来了，就这样就结束了吗？这么丑，美化一下嘛！好吧，我们把分针稍微点缀一下！

//画出时针，分针，秒针交叉点

cxt.beginPath();

cxt.strokeStyle="#f00";

cxt.arc(0,0,5,0,360,false);

cxt.fillStyle="#fff"; //填充颜色

cxt.fill(); //填充

cxt.stroke();

cxt.closePath();//秒针装饰

cxt.beginPath();

cxt.strokeStyle="#f00";

cxt.arc(0,-160,5,0,360,false);

cxt.fill();//填充

cxt.stroke();

cxt.closePath();

cxt.restore();

说明一下：上一段是画的3个指针交叉的地方，给点装饰，见图上，这样显得针是围绕一个点转的，fill()是填充的意思，相当于是画一个实心圆，我们填充的是白色，外面的描边是红色，你可以这么理解，一个空心圆里面填充了一个白色，懂了吧；

下面的是分针指针尖山的一个小装饰，跟前面的是一样的，只是位置不一样，但是这样是不是更加“高端大气上档次”了；

效果如图：

到这里就结束了吗？好像不走耶，好吧，我们让他动起来，动起来首先要知道时间，那我们就获取一下本地的时间：

//获取时间

var now = new Date(); //定义时间

var sec = now.getSeconds(); //获取秒

var minute = now.getMinutes(); //获取分钟

var hour = now.getHours(); //获取小时//小时必须获取浮点类型，产生偏移(小时+分钟比)

hour = hour + minute/60;

//将24小时转换为12小时

hour=hour>12?hour-12:hour;

为什么要写最后2行呢？解释一下，最后一行是因为本地时间是24小时制，而我们的时钟是12小时，所以我们要转换一下，变成12小时；倒数第二行是，如果不加这行，时针只要没有满一个小时，指针一直指针整数刻度上的，而实际的钟表不是这样的，时针在不是整点的时候会有一点偏移，所以我们加的偏移量就是分针走的比例(大家有兴趣可以试一下不加会是什么效果)；

要动起来我们需要用到setInterval()函数，那我们将我们写的代码用一个函数包起来，这样就简洁了，但是不包含开始的2句，我们用drawClock()吧

functiondrawClock(){//获取时间

var now = new Date(); //定义时间

var sec = now.getSeconds(); //获取秒

var minute = now.getMinutes(); //获取分钟

var hour = now.getHours(); //获取小时

//小时必须获取浮点类型，产生偏移(小时+分钟比)

hour = hour + minute/60;

//将24小时转换为12小时

hour=hour>12?hour-12:hour;//表盘(蓝色)

cxt.beginPath(); //画笔开始

cxt.lineWidth = 5; //设置画笔的线宽

cxt.strokeStyle="blue"; //设置画笔的颜色

cxt.arc(250,250,200,0,360,false); //绘制圆形，坐标250,250 半径200，整圆(0-360度)，false表示顺时针

cxt.stroke(); //绘图

cxt.closePath(); //结束画布

//刻度

//时针刻度

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

cxt.save();//设置时针的样式

cxt.lineWidth=7;

cxt.strokeStyle="#000";//设置异次元空间原点

cxt.translate(250,250);//设置旋转角度

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

cxt.beginPath();

cxt.moveTo(0,-170); //画线， 从坐标0，-170开始

cxt.lineTo(0,-190); //到坐标0，-190结束

cxt.stroke();

cxt.closePath();

cxt.restore();

}//分针刻度

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

cxt.save();

cxt.lineWidth=5;

cxt.strokeStyle="#000";

cxt.translate(250,250);

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

cxt.beginPath();

cxt.moveTo(0,-180);

cxt.lineTo(0,-190);

cxt.stroke();

cxt.closePath();

cxt.restore();

}//时针

cxt.save();//时针样式

cxt.lineWidth = 7;

cxt.strokeStyle="#000";

cxt.translate(250,250);

cxt.rotate(/*hour**/30*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-140);

cxt.lineTo(0,10);

cxt.stroke();

cxt.closePath();

cxt.restore();//分针

cxt.save();//分针样式

cxt.lineWidth = 5;

cxt.strokeStyle="#000";

cxt.translate(250,250);

cxt.rotate(/*minute**/6*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-160);

cxt.lineTo(0,15);

cxt.stroke();

cxt.closePath();

cxt.restore();//秒针

cxt.save();

cxt.lineWidth= 3;

cxt.strokeStyle="#f00";

cxt.translate(250,250);

cxt.rotate(/*sec**/60*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-185);

cxt.lineTo(0,20);

cxt.stroke();

cxt.closePath();//画出时针，分针，秒针交叉点

cxt.beginPath();

cxt.strokeStyle="#f00";

cxt.arc(0,0,5,0,360,false);

cxt.fillStyle="#fff"; //填充颜色

cxt.fill(); //填充

cxt.stroke();

cxt.closePath();//秒针装饰

cxt.beginPath();

cxt.strokeStyle="#f00";

cxt.arc(0,-160,5,0,360,false);

cxt.fill();

cxt.stroke();

cxt.closePath();

cxt.restore();

}//使用setinterval();让时钟动起来

setInterval(drawClock,1000);

ok，动起来，好，刷新，咦，没有动耶，为什么呢，原来我们的指针都只是定义了一个角度，肯定懂不起来啦，好，我们将我们获取的时间嫁到指针上

//时针

cxt.save();//时针样式

cxt.lineWidth = 7;

cxt.strokeStyle="#000";

cxt.translate(250,250);

cxt.rotate(/*hour**/30*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-140);

cxt.lineTo(0,10);

cxt.stroke();

cxt.closePath();

cxt.restore();//分针

cxt.save();//分针样式

cxt.lineWidth = 5;

cxt.strokeStyle="#000";

cxt.translate(250,250);

cxt.rotate(minute*6*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-160);

cxt.lineTo(0,15);

cxt.stroke();

cxt.closePath();

cxt.restore();//秒针

cxt.save();

cxt.lineWidth= 3;

cxt.strokeStyle="#f00";

cxt.translate(250,250);

cxt.rotate(sec*60*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-185);

cxt.lineTo(0,20);

cxt.stroke();

cxt.closePath();

看各指针旋转角度的变化，不错，被你找到了，那现在应该可以转了吧，看图

如图所示：

哎呀，妈妈呀，这是什么怪物，怎么会这样呢？你的是这样吗？是这样就对了，原因是每一次指针旋转都是画上去的，走一步画一步，就出现了像扇子一样的东西，所以我们要在画图之前清空画布，就是画之前清掉前面画的

cxt.clearRect(0,0,500,500); //清除画布

这个是什么意思呢，实际上是2个坐标，0,0  和 500,500 对应整个画布；

那这样应该就万事大吉了吧，刷新，啧啧，总觉得哪里不对劲，对，好像出来的时候慢了点，要等一会才出来，你的是这样吗，是这样啊，是这样 就对了，因为我们在他动之前让他把表画出来，所以执行setInterval()函数时需要1秒之后才开始画，这就是为什么要等大概1秒针才出现的原因，解决方法，在setInterval()前执行drawClock()函数；

drawClock();

setInterval(drawClock,1000);

到这里，所有的问题就都解决了，你的时钟动了没，现在几点了！

现在我把整个代码附在下面，供大家参考学习：

canvas时钟

您的浏览器当前版本不支持canvas表签

varclock=document.getElementById("clock");varcxt=clock.getContext('2d');functiondrawClock(){

cxt.clearRect(0,0,500,500);//清除画布

//获取时间

varnow= newDate();//定义时间

varsec=now.getSeconds();//获取秒

varminute=now.getMinutes();//获取分钟

varhour=now.getHours();//获取小时

//小时必须获取浮点类型，产生偏移(小时+分钟比)

hour=hour+minute/60;

//将24小时转换为12小时

hour=hour>12?hour-12:hour;//表盘(蓝色)

cxt.beginPath();//画笔开始

cxt.lineWidth= 5;//设置画笔的线宽

cxt.strokeStyle="blue";//设置画笔的颜色

cxt.arc(250,250,200,0,360,false);//绘制圆形，坐标250,250 半径200，整圆(0-360度)，false表示顺时针

cxt.stroke();//绘图

cxt.closePath();//结束画布

//刻度

//时针刻度

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

cxt.save();//设置时针的样式

cxt.lineWidth=7;

cxt.strokeStyle="#000";//设置异次元空间原点

cxt.translate(250,250);//设置旋转角度

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

cxt.beginPath();

cxt.moveTo(0,-170);//画线， 从坐标0，-170开始

cxt.lineTo(0,-190);//到坐标0，-190结束

cxt.stroke();

cxt.closePath();

cxt.restore();

}//分针刻度

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

cxt.save();

cxt.lineWidth=5;

cxt.strokeStyle="#000";

cxt.translate(250,250);

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

cxt.beginPath();

cxt.moveTo(0,-180);

cxt.lineTo(0,-190);

cxt.stroke();

cxt.closePath();

cxt.restore();

}//时针

cxt.save();//时针样式

cxt.lineWidth= 7;

cxt.strokeStyle="#000";

cxt.translate(250,250);

cxt.rotate(hour*30*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-140);

cxt.lineTo(0,10);

cxt.stroke();

cxt.closePath();

cxt.restore();//分针

cxt.save();//分针样式

cxt.lineWidth= 5;

cxt.strokeStyle="#000";

cxt.translate(250,250);

cxt.rotate(minute*6*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-160);

cxt.lineTo(0,15);

cxt.stroke();

cxt.closePath();

cxt.restore();//秒针

cxt.save();

cxt.lineWidth= 3;

cxt.strokeStyle="#f00";

cxt.translate(250,250);

cxt.rotate(sec*6*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-185);

cxt.lineTo(0,20);

cxt.stroke();

cxt.closePath();//画出时针，分针，秒针交叉点

cxt.beginPath();

cxt.strokeStyle="#f00";

cxt.arc(0,0,5,0,360,false);

cxt.fillStyle="#fff";//填充颜色

cxt.fill();//填充

cxt.stroke();

cxt.closePath();//秒针装饰

cxt.beginPath();

cxt.strokeStyle="#f00";

cxt.arc(0,-160,5,0,360,false);

cxt.fill();

cxt.stroke();

cxt.closePath();

cxt.restore();

}//使用setinterval();让时钟动起来

drawClock();

setInterval(drawClock,1000);

希望对大家的学习有帮助！