canvas的实例--时钟动画-H5教程-PHP中文网

平时在公司不忙的时候，就喜欢写一些小效果什么的，一来复习复习，二来可以发现一些问题。

今天在群里看别人发了一手表的图片，卧槽...妥妥的工作好多年的节奏，后来想想还是做好自己的事情算了，想那多干啥，就画了一个手表....

直接上代码：

html

HTML5日本动画动漫网站模板是一款适合提供各种不同的日本动漫或动画网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

HTML><meta><title>canvas clock</title><script></script><canvas></canvas><script>clock.canvasClock();</script>

var clock=(function(){function _canvasClock(){var cvs=document.getElementById('canvas');var ctx=cvs.getContext('2d');var PI=Math.PI;var lineWidth=5;                                             //线宽var gradient=ctx.createLinearGradient(10,10,580,580);        //设置圆的颜色渐变gradient.addColorStop("0","#a251ff");
        gradient.addColorStop(1,"#2ec2ff");
        ctx.fillStyle = '#ef6670';
        ctx.fillRect(0,0,600,600);var drawBig=function(){var time=new Date();var second=time.getSeconds();                            //秒var Minute=time.getMinutes();                            //分var hour=time.getHours();                                //时//hour=hour+Minute/60;hour=hour>12?hour-12:hour;                               //表盘只有12小时            
            ctx.clearRect(0,0,600,600);                              //清空给定矩形内的指定像素//画圆            ctx.beginPath();
            ctx.lineWidth=lineWidth;
            ctx.strokeStyle=gradient;
            ctx.arc(300,300,290,0, PI * 2,false);
            ctx.stroke();
            ctx.closePath();
            
            ctx.beginPath();
            ctx.lineWidth=lineWidth;
            ctx.strokeStyle=gradient;
            ctx.arc(300,300,10,0, PI * 2,false);
            ctx.stroke();
            ctx.closePath();            for(var i=0;i