H5 canvas圆形的时钟

时间：2021-03-01 03:45:42

今天用H5中的canvas标签做一个时钟，H5中有很多好用的新增标签，真的很不错。

1.canvas标签介绍

<canvas> 标签定义图形，比如图表和其他图像，你必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

H5 canvas圆形的时钟

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.不过不是所有的浏览器都支持这个标签的，支持的有谷歌4.0，ie9.0，火狐2.0等。

2.时钟的绘制第一步

在html中添加以下代码，一个宽高都是100的画布。

<canvas id="myCanvas" width="100" height="100"></canvas>

 3.用js开始绘制钟表

<script type="text/javascript">

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

     var c = myCanvas.getContext('2d');

     function clock(){

         c.clearRect(0,0,100,100);

         var data = new Date();

         var sec =data.getSeconds();

         var min =data.getMinutes();

         var hour=data.getHours();

         c.save();

         c.translate(50,50);

         c.rotate(-Math.PI/2);

         //分钟刻度线

         for(var i=0;i<60;i++){    //画12个刻度线

             c.beginPath();

             c.strokeStyle = "#f00";

             c.lineWidth = 1 ;

             c.moveTo(45,0);

             c.lineTo(40,0);

             c.stroke();

             c.rotate(Math.PI/30); //每个6deg画一个时钟刻度线

             c.closePath();

         }

         //时钟刻度线

         for(var i=0;i<12;i++){    //画12个刻度线

             c.beginPath();

             c.strokeStyle = "#000";

             c.lineWidth = 2 ;

             c.moveTo(45,0);

             c.lineTo(40,0);

             c.stroke();

             c.rotate(Math.PI/6); //每个30deg画一个时钟刻度线

             c.closePath();

         }

         //外表盘

         c.beginPath();

         c.strokeStyle = "pink";

         c.arc(0,0,55,0,Math.PI*2);

         c.lineWidth = 16 ;

         c.stroke();

         c.closePath();

         //画时针

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

//                console.log(hour);

         c.beginPath();

         c.save();

         c.rotate(Math.PI/6*hour+Math.PI/6*min/60+Math.PI/6*sec/3600);

         c.strokeStyle = "yellowgreen";

         c.lineWidth = 4 ;

         c.moveTo(-25,0);

         c.lineTo(40,0);

         c.stroke();

         c.restore();

         c.closePath();

         //画分针

//                console.log(min);

         c.beginPath();

         c.save();

         c.rotate(Math.PI/30*min+Math.PI/30*sec/60);

         c.strokeStyle = "springgreen";

         c.lineWidth = 3 ;

         c.moveTo(-15,0);

         c.lineTo(40,0);

         c.stroke();

         c.restore();

         c.closePath();

         //画秒针

         c.beginPath();

         c.save();

         c.rotate(Math.PI/30*sec);

         c.strokeStyle = "red";

         c.lineWidth = 2 ;

         c.moveTo(-20,0);

         c.lineTo(40,0);

         c.stroke();

         c.restore();

         c.closePath();

         c.restore();

     }

     clock();

     setInterval(clock,100);

 </script>

 

   4.得到下图的效果

H5 canvas圆形的时钟

时钟已经画完了，关于形状和颜色可以自己再修改的。这个标签的很多使用方法我就不一一的说了，下面这个地址，大家可以查看的                  　　　http://www.runoob.com/html/html5-canvas.html

相关文章