canvas+js画时钟

以下代码可供参考。

<body>
       <canvas id="mc" width="300px" height="300px"></canvas>
       <script type="text/javascript">
           var canvas=document.getElementById("mc");
           var ctx=canvas.getContext('2d');/*获取画笔*/
           var x=canvas.width/2;
           var y=(canvas.height/2);/*圆心*/

           ctx.beginPath();
       ctx.arc(x,y,150,0,2*Math.PI);/*0到360度*/ /*画了一个圆*/
       ctx.stroke();

/*分钟刻度*/
           var angle=(2*Math.PI/60);/*360°/60=6°*/
           for(var i=0;i<60;i++){/*画60个刻度*/
               var star=i*angle;
               var end=(i+1)*angle;
               ctx.beginPath();/*开始路径*/
               ctx.moveTo(x,y);
               ctx.arc(x,y,150,star,end);
               ctx.stroke();
           }

           /*遮罩*/
           ctx.beginPath();
           ctx.strokeStyle='white';
          ctx.arc(x,y,140,0,2*Math.PI);/*0到360度*/ /*画了一个圆*/
          ctx.fillStyle='white';/*背景色为白色*/
          ctx.fill();
       ctx.stroke();


           /*时钟刻度*/
           var angle=(2*Math.PI/12);/*360/12*/
           for(var i=0;i<12;i++){/*画12个刻度*/
               var star=i*angle;
               var end=(i+1)*angle;
               ctx.beginPath();/*开始路径*/
               ctx.strokeStyle='black';
               ctx.moveTo(x,y);
               ctx.arc(x,y,150,star,end);
               ctx.stroke();
           }

           function time1(){
           /*遮罩*/
           ctx.beginPath();
           ctx.strokeStyle='white';
          ctx.arc(x,y,130,0,2*Math.PI);/*0到360度*/ /*画了一个圆*/
          ctx.fillStyle='white';/*背景色为白色*/
          ctx.fill();
       ctx.stroke();

           /**/


           var date=new Date();
       var h=date.getHours();
       var m=date.getMinutes();
       var s=date.getSeconds();
           if(h>12){
           h=h-12;
       }
       console.log(h);

       var secondAngle =((s*6-90)*(Math.PI)/180) ; //计算出来秒针的弧度
       var minuteAngle =((m*6-90)*(Math.PI)/180+(secondAngle/60)); //计算出来分针的弧度
       var hourAngle =((h*30-90)*(Math.PI)/180 +(minuteAngle/12)); //计算出来时针的弧度


           /*秒针*/
           ctx.beginPath();
           ctx.strokeStyle='red';
ctx.moveTo(x, y);
ctx.arc(x, y, 120, secondAngle, secondAngle);
ctx.stroke();

           /*分针*/
           ctx.beginPath();
           ctx.strokeStyle='blue';
ctx.moveTo(x, y);
ctx.arc(x, y, 90, minuteAngle, minuteAngle);
ctx.stroke();

/*时针*/
           ctx.beginPath();
           ctx.strokeStyle='black';
ctx.moveTo(x, y);
ctx.arc(x, y,60, hourAngle, hourAngle);
ctx.stroke();

//画中心圆点
ctx.beginPath();
ctx.strokeStyle='black';
ctx.arc(x, y, 10, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
ctx.stroke();
           }
           time1();
           setInterval(time1,1000);




       </script>
   </body>

canvas+js画时钟相关推荐

用canvas画布画时钟
canvas canvas简介 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形 ...
原生JS的canvas标签画时钟
首先要申明本人对于美除了美女真没什么要求. 其次讲讲次学习碰到重要知识点: 1.画圆(弧): context.arc(x, y, radius, Math.PI / 180 * startAngle, ...
数字时钟html5 js,html5 canvas js(数字时钟)实例代码
canvas dClock 您的浏览器太古董了,升级吧! var clock = document.getElementById("clock"); var cxt = clock ...
html数字时钟免费代码,html5 canvas js(数字时钟)实例代码
canvas dClock 您的浏览器太古董了,升级吧! var clock = document.getElementById("clock"); var cxt = clock ...
用canvas画时钟（一步步详解附带源代码）
canvas绘图该元素负责在页面中设定一个区域,然后由js动态地在这个区域中绘制图形.这个技术最早是由美国苹果公司推出的,目的是为了取代flash,很快主流浏览器都支持它. 绘制路径要绘制路径首先 ...
html+js+显示文字时钟,JavaScript canvas实现文字时钟
本文实例为大家分享了canvas实现文字时钟的具体代码,供大家参考,具体内容如下先看看效果图代码 Document 您的浏览器不支持canvas var c=document.getElement ...
Canvas绘制一个时钟
Canvas绘制一个时钟 Canvas:一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处 ...
html5网站粒子时钟,Html5 canvas实现粒子时钟的示例代码
这篇文章主要介绍了Html5 canvas实现粒子时钟的示例代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 我们先看看粒子时钟的效果,如下: 下面我们将通过canvas和js实 ...
s时钟画布 android,Android UI编程进阶——使用SurfaceViewt和Canvas实现动态时钟
概述: 很多时候我们想要自己写一些类似时钟.罗盘的控件,却又找不到合适的Demo.我想这时你可能索性就直接上图片了.在Android有Canvas和Paint这么好的画师的情况下,还是选择使用图片,的 ...
Android UI编程进阶——使用SurfaceViewt和Canvas实现动态时钟
概述: 很多时候我们想要自己写一些类似时钟.罗盘的控件,却又找不到合适的Demo.我想这时你可能索性就直接上图片了.在Android有Canvas和Paint这么好的画师的情况下,还是选择使用图片,的 ...

canvas+js画时钟

canvas+js画时钟相关推荐

最新文章

热门文章