canvas的实例--时钟动画

nbsp;HTML&gt;<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