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