canvas闹钟

来源：互联网发布：linux添加用户的命令编辑：程序博客网时间：2024/04/30 04:50
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>时钟</title>    <style>        canvas{            background-color:#57baac;        }    </style></head><body>    <canvas width="667px" height="881px" id="mycanvas"></canvas>    <script type="text/javascript">        var a=1;        window.onload=function(){            setInterval(drawClock,250);        };function drawClock(){    var mycanvas=document.getElementById("mycanvas");    var context=mycanvas.getContext("2d");//清除画布         context.clearRect(0,0,667,881);//外层空心圆         context.beginPath();         context.arc(300,300,150,0,360*Math.PI/180);         context.closePath();         context.strokeStyle="#f26a4c";         context.lineWidth=30;         context.stroke();//内层实心圆         context.arc(300,300,120,0,360*Math.PI/180);         context.fillStyle="white";         context.fill();//刻度         context.save();         context.translate(300,300);         for(var i=0;i<60;i++){             if(i%5==0){                 context.beginPath();                 context.moveTo(130,0);                 context.lineTo(150,0);                 context.rotate(6*Math.PI/180);                 context.closePath();                 context.lineWidth=7;                 context.strokeStyle="#6a686a";                 context.stroke();             }else{                 context.beginPath();                 context.moveTo(140,0);                 context.lineTo(150,0);                 context.rotate(6*Math.PI/180);                 context.closePath();                 context.lineWidth=3;                 context.strokeStyle="#acabac";                 context.stroke();             }         }         context.restore();//圆心结         context.beginPath();         context.arc(300,300,15,0,360*Math.PI/180);         context.closePath();         context.fillStyle="#c04a0f";         context.fill();//秒针         var date=new Date();         var second=date.getSeconds();     //获取秒数         context.save();         context.translate(300,300);         context.beginPath();         context.rotate(6*second*Math.PI/180);         context.moveTo(0,-120);         context.lineTo(0,60);         context.closePath();         context.strokeStyle="#ad4614";         context.lineWidth=2;         context.stroke();         context.restore();//分针         var minute=date.getMinutes();         context.save();         context.translate(300,300);         context.beginPath();         context.rotate((6*minute+second/10)*Math.PI/180);         context.moveTo(0,-15);         context.lineTo(0,-120);         context.closePath();         context.strokeStyle="#f5b564";         context.lineWidth=10;         context.lineCap=5;         context.stroke();         context.restore();//小时         var hour=date.getHours();         context.save();         context.translate(300,300);         context.beginPath();         context.rotate((second/3600+minute/60+hour)*30*Math.PI/180);         context.moveTo(0,-15);         context.lineTo(0,-80);         context.closePath();         context.strokeStyle="#f5b564";         context.lineWidth=10;         context.lineCap=5;         context.stroke();         context.restore();//闹钟的两个脚//    右脚    context.save();    context.translate(300,300);    context.beginPath();    context.rotate(63*Math.PI/180);    context.moveTo(165,0);    context.lineTo(200,0);    context.closePath();    context.strokeStyle="#877c84";    context.lineWidth=20;    context.lineCap=5;    context.stroke();    context.restore();//左脚    context.save();    context.translate(300,300);    context.beginPath();    context.rotate(117*Math.PI/180);    context.moveTo(165,0);    context.lineTo(200,0);    context.closePath();    context.strokeStyle="#877c84";    context.lineWidth=20;    context.lineCap=5;    context.stroke();    context.restore();//上半部分//    圆环    context.save();    context.beginPath();    context.arc(300,130,100,20*Math.PI/180,160*Math.PI/180,true);//    context.closePath();    context.strokeStyle="#867e86";    context.lineWidth=12;    context.stroke();    context.restore();//右边耳朵    context.save();    context.translate(300,300);    context.beginPath();    context.rotate((-60)*Math.PI/180);    context.moveTo(180,0);    context.lineTo(225,0);    context.strokeStyle="#eb6d4e";    context.lineWidth=118;    context.stroke();    context.restore();//左边耳朵    context.save();    context.translate(300,300);    context.beginPath();    context.rotate((-120)*Math.PI/180);    context.moveTo(180,0);    context.lineTo(225,0);    context.strokeStyle="#eb6d4e";    context.lineWidth=118;    context.stroke();    context.restore();//摆钟    if(a==1){        a=-1;    }else{        a=1;    }            context.save();            console.log(a);            context.translate(300,300);            context.beginPath();            context.rotate(a*8*Math.PI/180);            context.moveTo(0,-165);            context.lineTo(0,-185);            context.closePath();            context.strokeStyle="black";            context.lineWidth=15;            context.stroke();            context.restore();            context.save();            context.translate(300,300);            context.beginPath();            context.rotate(a*8*Math.PI/180);            context.arc(0,-195,15,0,360*Math.PI/180);            context.closePath();            context.fillStyle="black";            context.fill();            context.restore();     }    </script></body></html>
这里写图片描述
0 0