玩转html5（四）----使用canvas画一个时钟（可以动的哦！）

先给个效果图，我画的比较丑，大家可以自己美化一下，
直接上代码：
<!DOCTYPE html>

<meta charset="utf-8">

<html>

   <body>

   	  <canvas  width="500" height="500" id="clock" >

   	         您的浏览器不支持canvas

   	  </canvas>

   	  <script>

           //获取画布

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

           //设置绘图环境

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

       function drawClock(){

       	   //清除画布

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

           //获取时间，

            var now =new Date();

            var second =now.getSeconds();

            var minute =now.getMinutes();

            var hour1 =now.getHours();

            //将24小时进制转为12小时，且为浮点型

            var hour=hour1+minute/60;

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

            //获取全部时间

            var time=now.toLocaleString( );

           //表盘

                //开始新路径

                cxt.beginPath();

                cxt.lineWidth=8;

                cxt.strokeStyle="blue";

                //路径函数 x,y,r,角度范围,顺时针/逆时针

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

                cxt.stroke();

                cxt.closePath();

            //刻度,利用旋转

               //时刻度

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

                	//保存当前状态

                    cxt.save();

                    //刻度粗细

                     cxt.lineWidth=5;

                    //刻度颜色

                    cxt.strokeStyle="black"

                    //设置00点,以画布中心为00

                    cxt.translate(250,250);

                    //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180

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

                    cxt.beginPath();

                    //刻度起始点

                    cxt.moveTo(0,-180);

                    //刻度结束点

                    cxt.lineTo(0,-195);

                    cxt.closePath();

                    cxt.stroke();

                    //将旋转后的图片返回原画布

                    cxt.restore();

                }

               //分刻度

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

                	//保存当前状态

                    cxt.save();

                    //刻度粗细

                    cxt.lineWidth=3;

                    //刻度颜色

                    cxt.strokeStyle="black"

                    //设置00点,以画布中心为00

                    cxt.translate(250,250);

                    //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180

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

                    cxt.beginPath();

                    //起始点

                    cxt.moveTo(0,-188);

                    cxt.lineTo(0,-195);

                    cxt.closePath();

                    cxt.stroke();

                    //将旋转后的图片返回原画布

                    cxt.restore();

                }

            //表盘中心

                cxt.beginPath();

                cxt.lineWidth=1;

                cxt.strokeStyle="red";

                cxt.fillStyle="red";

                //路径函数 x,y,r,角度范围,顺时针/逆时针

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

                cxt.fill();

                cxt.stroke();

                cxt.closePath();

            //时针

                //保存当前状态

                 cxt.save();

                 cxt.lineWidth=5;

                 cxt.strokeStyle="black";

                 //设置异次元空间00点

                 cxt.translate(250,250);

                 //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180

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

                 cxt.beginPath();

                 cxt.moveTo(0,-120);

                 cxt.lineTo(0,10);

                 cxt.closePath();

                 cxt.stroke();

                 cxt.restore();

            //分针

                 cxt.save();

                 cxt.lineWidth="3";

                 cxt.strokeStyle="black";

                 cxt.translate(250,250);

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

                 cxt.beginPath();

                 cxt.moveTo(0,-150);

                 cxt.lineTo(0,15);

                 cxt.closePath();

                 cxt.stroke();

                 cxt.restore();

            //秒针

                 cxt.save();

                 cxt.lineWidth="1.5";

                 cxt.strokeStyle="red";

                 cxt.translate(250,250);

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

                 cxt.beginPath();

                 cxt.moveTo(0,-160);

                 cxt.lineTo(0,20);

                 cxt.closePath();

                 cxt.stroke();

                 //秒针前端小点

                 cxt.beginPath();

                 //外环为红色

                 cxt.strokeStyle="red";

                 //灰色填充

                 cxt.fillStyle="gray";

                 cxt.arc(0,-145,4,0,360,false);

                   cxt.fill();

                 cxt.closePath();

                 cxt.stroke();

                 cxt.restore();

            //表盘中心

                cxt.beginPath();

                cxt.lineWidth=1;

                //外环为红色

                cxt.strokeStyle="red";

                //灰色填充

                cxt.fillStyle="gray";

                //路径函数 x,y,r,角度范围,顺时针/逆时针

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

                cxt.fill();

                cxt.stroke();

                cxt.closePath();

            //写时间

                cxt.font="15px 黑体 ";

                 cxt.fillStyle="black";

                //实心字

                cxt.fillText(time,160,150);

           }

           //使用setInterval(代码，毫秒时间)使时钟转起来;

           drawClock();

           setInterval(drawClock,1000);

   	  </script>

   </body>

</html>
巴特西

玩转html5（四）----使用canvas画一个时钟（可以动的哦！）

最新文章

热门文章
