canvas的实例--时钟动画

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

直接上代码：

htML

!DOCTYPE HTML>
    html>
    head>
    meta http-equiv="Content-type" content="text/html;
     charset=utf-8">
    tITle>
    canvas clock/title>
    script type="text/javascript" src="percent.js?1.1.10">
    /script>
    /head>
    body>
    canvas id="canvas" width="600" height="600">
    /canvas>
    /body>
    /html>
    script type="text/javascript">
    clock.canvasClock();
    /script>
    

js

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;
    i60;
i++){
                      ctx.save();
                            　//保存之前画布状态   ctx.lineWidth=4;
                    　　 //设置分针的粗细                 ctx.strokeStyle="#616161";
              //设置分针的颜色                 ctx.translate(300,300);
                 //画布圆点设置        ctx.rotate(i*PI/30);
                    //角度*Math.PI/180=弧度,设置旋转角度                 ctx.beginPath();
                        //开始一条路径ctx.moveTo(0,-287);
                     //相对画布圆点路径的起点ctx.lineto(0,-283);
                     //相对画布圆点路径的终点ctx.closePath();
                        //结束一条路径ctx.stroke();
                           //实际地绘制出通过 moveTo()和 lineTo()方法定义的路径ctx.reStore();
                      //restore() 方法将绘图状态置为保存值            }
                for(var i=0;
    i12;
i++){
                    ctx.save();
                    ctx.lineWidth=4;
                    ctx.strokeStyle=gradient;
                        ctx.translate(300,300);
                       ctx.rotate(i*PI/6);
                    ctx.beginPath();
                      ctx.moveTo(0,-287);
                    ctx.lineTo(0,-278);
                     ctx.closePath();
                      ctx.stroke();
                      ctx.restore();
              }
                //时针              ctx.save();
                           ctx.lineWidth=3;
                                  ctx.strokeStyle="#0f0f0f";
                                ctx.translate(300,300);
                ctx.rotate(hour*PI/6+second*PI/108000);
                  ctx.beginPath();
                  ctx.moveTo(0,-238);
                ctx.lineTo(0,10);
                  ctx.closePath();
                  ctx.stroke();
                  ctx.restore();
                  //分针              ctx.save();
                  ctx.lineWidth=3;
                  ctx.strokeStyle="#010101";
                  ctx.translate(300,300);
                  ctx.rotate(Minute*PI/30+second*PI/1800);
                  ctx.beginPath();
                  ctx.moveTo(0,-258);
                  ctx.lineTo(0,15);
                  ctx.closePath();
                  ctx.stroke();
                ctx.restore();
                              //秒针                          ctx.save();
                  ctx.strokeStyle="#fF100d";
                  ctx.lineWidth=3;
                  ctx.translate(300,300);
                               ctx.rotate(second*PI/30);
                               ctx.beginPath();
                ctx.moveTo(0,-278);
                  ctx.lineTo(0,20);
                  ctx.closePath();
                  ctx.stroke();
                              ctx.beginPath();
                            //时针分针秒针交点  ctx.arc(0,0,6,0,2*PI,false);
                ctx.closePath();
                                  ctx.fillStyle="#fff";
                ctx.fill();
                               ctx.stroke();
                     ctx.restore();
                  requestAnimationFrame(drawBig);
            //实现动画修改的接口        }
    ;
            drawBig();
            setInterval(drawBig,1000);
                    //每1s重绘一次    }
    ;
return{
        canvasClock:_canvasClock,    }
}
    ())

本来准备封装一下的，要下班时来任务了，飞了....

以上就是canvas的实例--时钟动画的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！