html5 clock 时钟

最新推荐文章于 2024-08-01 16:15:33 发布

weixin_30609287

最新推荐文章于 2024-08-01 16:15:33 发布

阅读量262

点赞数

原文链接：http://www.cnblogs.com/min-cj/p/html5_clock.html

版权

1.stroke()方法绘制当前路径的边框。路径定义的几何线条产生了，但线条的可视化取决于 strokeStyle、lineWidth、lineJoin、lineCap 和 miterLimit 等属性。

2.save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态，然后，通过调用 restore() 来恢复以前的值

3.translate() 方法为画布的变换矩阵添加水平的和垂直的偏移。参数 dx 和 dy 添加给后续定义路径中的所有点。

4.scale() 方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。例如，传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍，而高度变为原来的 1/2。指定一个负的 sx 值，会导致 X 坐标沿 Y 轴对折，而指定一个负的 sy 会导致 Y 坐标沿着 X 轴对折。

5.rotate() 方法通过指定一个角度，改变了画布坐标和 Web 浏览器中的 <Canvas> 元素的像素之间的映射，使得任意后续绘图在画布中都显示为旋转的。它并没有旋转 <Canvas> 元素本身。注意，这个角度是用弧度指定的。

<!doctype html>
<html>
   <head></head>
   <body>
       <canvas id="clock" width="500" height="500">
           您的浏览器不支持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 sec=now.getSeconds();
           var min=now.getMinutes();
           var hour=now.getHours();
           //小时必须获取浮点类型(小时+分数转化成的小时)
           hour=hour+min/60;
           //问题 19:23:30
           //将24小时进制转换为12小时
           hour=hour>12?hour-12:hour;

           //表盘(蓝色)
           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="#000";
                   //先设置0,0点
                   cxt.translate(250,250);
                   //再设置旋转角度
                   cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度
                   cxt.beginPath();
                   cxt.moveTo(0,-170);
                   if(i==0){
                       cxt.lineTo(0,-150);//改变测试-12点的样式
                   }else{
                       cxt.lineTo(0,-190);
                   }

                   cxt.closePath();
                   cxt.stroke();
                   cxt.restore();
               }

               //分刻度
               for(var i=0;i<60;i++){
                   cxt.save();
                   //设置分刻度的粗细
                   cxt.lineWidth=2;
                   //设置颜色(使用时刻度的颜色)
                   cxt.strokeStyle="#000";
                   //设置或者重置画布的0，0点
                   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";
               //设置异次元空间的0，0点
               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.strokeStyle="red";
               //粗细 3像素
               cxt.lineWidth=3;
               //重置0，0点
               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();
           }
           //使用setInterval(代码,毫秒时间) 让时钟动起来
           drawClock();
           setInterval(drawClock,1000);
       </script>
   </body>
</html>