html5绘制时钟动画 -电脑资料

    这篇文章主要介绍了html5绘制时钟动画,需要的朋友可以参考下

    var clock=document.getElementById("clock");

    var cxt=clock.getContext("2d");

    function drawNow(){

    var now=new Date();

    var hour=now.getHours();

    var min=now.getMinutes();

    var sec=now.getSeconds();

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

    hour=hour+min/60;

    //表盘(蓝色)

    cxt.lineWidth=10;

    cxt.strokeStyle="blue"

    cxt.beginPath();

    cxt.arc(250,250,200,0,360,false);

    cxt.closePath();

    cxt.stroke();

    //刻度

    //时刻度

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

    cxt.save();

    cxt.lineWidth=7;

    cxt.strokeStyle="black";

    cxt.translate(250,250);

    cxt.rotate(i*30*Math.PI/180);//旋转角度 角度*Math.PI/180=弧度

    cxt.beginPath();

    cxt.moveTo(0,-170);

    cxt.lineTo(0,-190);

    cxt.closePath();

    cxt.stroke();

    cxt.restore();

    }

    //分刻度

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

    cxt.save();

    //设置分刻度的粗细

    cxt.lineWidth=5;

    //重置画布原点

    cxt.translate(250,250);

    //设置旋转角度

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

    //画分针刻度

    cxt.strokeStyle="black";

    cxt.beginPath();

    cxt.moveTo(0,-180);

    cxt.lineTo(0,-190);

    cxt.closePath();

    cxt.stroke();

    cxt.restore();

    }

    //时针

    cxt.save();

    // 设置时针风格

    cxt.lineWidth=7;

    cxt.strokeStyle="black";

    cxt.translate(250,250);

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

    cxt.beginPath();

    cxt.moveTo(0,-140);

    cxt.lineTo(0,10);

    cxt.closePath();

    cxt.stroke();

    cxt.restore();

    //分针

    cxt.save();

    cxt.lineWidth=5;

    cxt.strokeStyle="black";

    //设置异次元空间分针画布的中心

    cxt.translate(250,250);

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

    cxt.beginPath();

    cxt.moveTo(0,-160);

    cxt.lineTo(0,15);

    cxt.closePath();

    cxt.stroke()

    cxt.restore();

    //秒针

    cxt.save();

    //设置秒针的风格

    //颜色:红色

    cxt.strokeStyle="red";

    cxt.lineWidth=3;

    //重置原点

    cxt.translate(250,250);

    //设置角度

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

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

    cxt.beginPath();

    cxt.moveTo(0,-170);

    cxt.lineTo(0,20);

    cxt.closePath();

    cxt.stroke();

    //画出时针,分针,秒针的交叉点

    cxt.beginPath();

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

    cxt.closePath();

    //设置填充

    cxt.fillStyle="gray";

    cxt.fill();

    //cxt.strokeStyle="red";

    cxt.stroke();

    //画出秒针的小圆点

    cxt.beginPath();

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

    cxt.closePath();

    //设置填充

    cxt.fillStyle="gray";

    cxt.fill();

    //cxt.strokeStyle="red";

    cxt.stroke();

cxt.restore();

}

    function drawClock(){

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

    drawNow();

    }

    drawNow();

    setInterval(drawClock,1000);