首页 > 代码库 > html5 canvas简易时钟

html5 canvas简易时钟

        <canvas id=‘clock‘ width=500 height=500>            您的浏览器需要升级        </canvas>        <script type="text/javascript" charset="utf-8">          var clock=document.getElementById("clock");          var cxt=clock.getContext(2d);                    function drawClock () {                    //清除画布                  cxt.clearRect(0,0,500,500);          var now=new Date();          var sec=now.getSeconds();          var min=now.getMinutes();          var hour=now.getHours();          //时间格式   问题:将24小时制转化整12小时制          hour=hour>12?hour-12:hour;          hour=hour+min/60;          //表盘(蓝色)          cxt.strokeStyle=blue;          cxt.lineWidth=10;          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=#000;                //设置开始点                cxt.translate(250,250);                //设置弧度                cxt.rotate(i*30*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.strokeStyle=#000;                cxt.lineWidth=5;                cxt.translate(250,250);                cxt.rotate(i*6*Math.PI/180);                cxt.beginPath();                cxt.moveTo(0,-180);                cxt.lineTo(0,-190);                cxt.closePath();                cxt.stroke();                cxt.restore();            }                  //时针                  //设置时针分割         cxt.save();                  cxt.lineWidth=7;         cxt.strokeStyle=#000;         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=#000;         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.lineWidth=3;         cxt.strokeStyle=red;         ///cxt.translate(250,250);         cxt.translate(250,250);         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.stroke();         //画另一个小圆         cxt.beginPath();         cxt.arc(0,-150,5,0,360,false);         cxt.closePath();         //设置填充样式         cxt.fillStyle=gray;                  cxt.fill();         cxt.stroke();         cxt.restore();         }         //使用定时器让表针动起来         drawClock();         setInterval(drawClock(),1000);        </script>

 

html5 canvas简易时钟