h5 canvas

来源：互联网发布：小眼睛美女知乎编辑：程序博客网时间：2024/05/16 02:03

中心思想：
1、利用h5 canvas 功能，在页中绘制圆盘，从而来绘制出表盘；
2、获取当前时间，利用定时器来让时针装动；

效果图：

这里写图片描述

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            canvas{                border: 1px solid red;            }        </style>    </head>    <body>        <canvas id="box" width="1000" height="600"></canvas>    </body>    <script type="text/javascript">        var box=document.getElementById('box');        var oc=box.getContext('2d');        function todraw(){            var x=300;            var y=300;            var r=150;            oc.clearRect(0,0,box.width,box.height);//          绘制大表盘刻度            oc.beginPath();            for(var i=0;i<60;i++){                oc.moveTo(x,y);                oc.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);            }            oc.closePath();            oc.stroke();//          白盘覆盖留下小刻度            oc.fillStyle='#fff';            oc.beginPath();            oc.moveTo(x,y);            oc.arc(x,y,r*19/20,0,360*Math.PI/180,false);            oc.closePath();            oc.fill();//          绘制长刻度            oc.beginPath();            for(var i=0;i<12;i++){                oc.moveTo(x,y);                oc.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);            }            oc.closePath();            oc.lineWidth=3;            oc.stroke();//          白盘覆盖留下长刻度            oc.fillStyle='#fff';            oc.beginPath();            oc.moveTo(x,y);            oc.arc(x,y,r*18/20,0,360*Math.PI/180,false);            oc.closePath();            oc.fill();            var time=new Date();            var hour=time.getHours();            var min=time.getMinutes();            var sec=time.getSeconds();            var sdeg=(-90+sec*6)*Math.PI/180;            var mdeg=(-90+(min+sec/60)*6)*Math.PI/180;            var hdeg=(-90+(hour+min/60)*30)*Math.PI/180;//          时针布置            oc.lineWidth=4;            oc.beginPath();            oc.moveTo(x,y);            oc.arc(x,y,r*10/20,hdeg,hdeg,false);            oc.closePath();            oc.stroke();//          分针布置            oc.lineWidth=3;            oc.beginPath();            oc.moveTo(x,y);            oc.arc(x,y,r*12/20,mdeg,mdeg,false);            oc.closePath();            oc.stroke();//          秒针布置            oc.lineWidth=2;            oc.beginPath();            oc.moveTo(x,y);            oc.arc(x,y,r*15/20,sdeg,sdeg,false);            oc.closePath();            oc.stroke();        }        todraw();        setInterval(todraw,1000)    </script></html>

阅读全文

0 0