专栏首页ccylovehsJavaScript实现iphone时钟

JavaScript实现iphone时钟

看效果(欢迎各位同学推荐更好的gif制作软件)

请看代码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         body {
  8             padding: 0;
  9             margin: 0;
 10             background-color: rgba(0, 0, 0, 1);
 11         }
 12 
 13         canvas {
 14             background-color: rgba(255, 255, 255, 1);
 15             display: block;
 16             margin: 10px auto;
 17         }
 18     </style>
 19 </head>
 20 <body>
 21 <canvas id="clock" width="600" height="600">当前浏览器不支持Canvas</canvas>
 22 <script>
 23     (function(){
 24         let canvas = document.querySelector("#clock");
 25         let ctx = canvas.getContext("2d");
 26         existRequestAnimationFrame();
 27         draw(ctx);
 28     })();
 29     function existRequestAnimationFrame(){
 30         var vendors = ['webkit', 'moz'];
 31         for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
 32             var vp = vendors[i];
 33             window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
 34         }
 35         if(!window.requestAnimationFrame){
 36             var lastTime = 0;
 37             window.requestAnimationFrame = function(callback){
 38                 var now = new Date().getTime();
 39                 var nextTime = Math.max(lastTime + 16, now);//浏览器渲染的间隔时间大约16ms
 40                 return window.setTimeout(function(){
 41                     callback(lastTime = nextTime);
 42                 },nextTime - now);
 43             };
 44         }
 45     }
 46     function draw(ctx){
 47         requestAnimationFrame(function step(){
 48             drawDial(ctx); //绘制表盘
 49             drawAllHands(ctx); //绘制时分秒针
 50             requestAnimationFrame(step);
 51         });
 52     }
 53     /*绘制时分秒针*/
 54     function drawAllHands(ctx){
 55         let time = new Date();
 56         let s = time.getSeconds(),m = time.getMinutes(),h = time.getHours();
 57         let pi = Math.PI;
 58         let secondAngle = pi / 180 * 6 * s + time.getMilliseconds()*pi*6/1000/180;  //计算出来s针的弧度
 59         let minuteAngle = pi / 180 * 6 * m + secondAngle / 60;  //计算出来分针的弧度
 60         let hourAngle = pi / 180 * 30 * h + minuteAngle / 12;  //计算出来时针的弧度
 61         drawHand(hourAngle, 90, 6, "NavyBlue", ctx);  //绘制时针
 62         drawHand(minuteAngle, 146, 4, "black", ctx);  //绘制分针
 63         drawHand(secondAngle, 248, 2, "red", ctx);  //绘制秒针
 64     }
 65     /* 绘制时针、或分针、或秒针
 66      * 参数1:要绘制的针的角度
 67      * 参数2:要绘制的针的长度
 68      * 参数3:要绘制的针的宽度
 69      * 参数4:要绘制的针的颜色
 70      * 参数4:ctx
 71      * */
 72     function drawHand(angle, len, width, color, ctx){
 73         ctx.save();
 74         ctx.translate(300, 300); //把坐标轴的远点平移到原来的中心
 75         ctx.rotate(-Math.PI / 2 + angle);  //旋转坐标轴。 x轴就是针的角度
 76         ctx.beginPath();
 77         ctx.moveTo(-4, 0);
 78         ctx.lineTo(len, 0);  // 沿着x轴绘制针
 79         ctx.lineWidth = width;
 80         ctx.strokeStyle = color;
 81         ctx.lineCap = "round";
 82         ctx.stroke();
 83         ctx.closePath();
 84         ctx.restore();
 85     }
 86     /*绘制表盘*/
 87     function drawDial(ctx){
 88         let pi = Math.PI;
 89         ctx.clearRect(0, 0, 600, 600); //清除所有内容
 90         ctx.save();
 91 
 92         //设置canvas四边角弧度区域为背景色
 93         ctx.translate(0, 0);
 94         ctx.beginPath();
 95         ctx.fillStyle = 'rgba(0, 0, 0, 1)';
 96         ctx.fillRect(0,0,600,600);
 97         ctx.fill();
 98         ctx.translate(300, 300);
 99         ctx.beginPath();
100         ctx.arc(0, 0, 300, 0, 2 * pi); //绘制圆周
101         ctx.fillStyle = 'rgb(255,255,255)';
102         ctx.fill();
103         ctx.stroke();
104         ctx.closePath();
105         //绘制数字
106         for (let i = 0; i < 12; i++){
107             let deg = -pi / 2 + i * pi / 6 + pi / 180 * 30,//旋转的角度
108                 text = (i+1)+'';//数值
109             ctx.save();
110             ctx.beginPath();
111             ctx.font = '27px Microsoft Yahei';
112             ctx.fillStyle = 'rgb(0,0,0)';
113             ctx.fillText(text, 250*Math.cos(deg) - 6, 250*Math.sin(deg) + 7);
114             ctx.restore();
115         }
116         ctx.restore();
117     }
118 </script>
119 </body>
120 </html>

转载请注明出处,谢谢~

参考资料

http://www.w3school.com.cn/tags/html_ref_canvas.asp

http://www.runoob.com/html/html5-canvas.html

https://blog.csdn.net/u012468376/article/details/73350998

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript模拟自由落体

    但是实际呈现的效果却不尽人意,应该是反弹位移计算有误,经反复思考无果(若哪位大拿有更好的实现方式欢迎评论告知)

    Jack Chen
  • linux环境下安装tomcat并配置tomcat日志分割

    ./configure  如果此步骤报错则根据提示对应解决,一般情况下是系统没有安装gcc

    Jack Chen
  • 再也不用被this苦恼了

    前端编程对于this再熟悉不过了,今日来个老调重弹温故知新,肯定有很多大佬已经完全吃透了this原理,敬请出门左拐。对于理解this似懂非懂的同学可以借鉴一波

    Jack Chen
  • Canvas 奇妙历险(一)

    canvas的中文名叫画布,是HTML5元素的一部分。最早是由苹果公司提出的这么一个概念,后来被应用在我们的网络技术上,结合Javascript脚本编程,我们可...

    丰臣正一
  • QML实现钟表效果

    Qt5以后的版本,主要加大的对Qt Quick的改进。现实最新的版本可以利用Qt Quick实现很多的绚丽的效果。此里只是利用画布Canvas简单钟表的效果。效...

    砸漏
  • canvas绘制闹钟-方法1 原

    总结:角度旋转默认是按右边水平方向,向下旋转,现在逆时针把画布旋转90度,使旋转的起始位置在正上方,画布旋转后x轴与y轴也随着画布旋转而旋转; 注意画好图之后...

    tianyawhl
  • Canvas基本动画-太阳系的动画 原

    1、清空canvas 除非接下来要画的内容会完全充满canvas(例如背景图),否则你需要清空所有,最简单的方法是使用clearRect方法 2、保存can...

    tianyawhl
  • 基于Canvas的时钟

    这里有一点取巧:画完外圈圆、内圈圆后,将原点(默认为0,0)转换为圆的中心点,这样的话,只需要知道角度,在已知时针、分针、秒针它的长度情况下,很容易求出对应的坐...

    meteoric
  • 给pugjs的stun主题添加canvas时钟

    首先隔了这么久才继续进行更新的原因是网站备案和毕业设计,加上刚入职没有时间去进行内容更新,以后会继续更新了

    impressionyang
  • 第156天:canvas(三)

    ​ translate方法接受两个参数。x 是左右偏移量,y 是上下偏移量,如右图所示。

    半指温柔乐

扫码关注云+社区

领取腾讯云代金券