canvas時鐘
阿新 • • 發佈：2018-12-12
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas</title> <style> body{background-color: rgba(0, 0, 0, 0.1)} </style> </head> <body> <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;"> 您的瀏覽器不支援 HTML5 canvas 標籤。</canvas> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> $(function() { var myAction = {}, ctx, earchSpeed = 60, moonSpeed = 6; var dom = { earchSpeed: $('#m-earth-speed'), moonSpeed: $('#m-moon-speed'), btn: $('#m-btn'), canvas: $('#myCanvas') }; $.extend(myAction, { initCanvas: function() { ctx = dom.canvas[0].getContext("2d"); myAction.draw(ctx); }, draw: function(ctx) { requestAnimationFrame(function step() { myAction.drawDial(ctx); //繪製錶盤 myAction.drawAllHands(ctx); //繪製時分秒針 requestAnimationFrame(step); }); }, /*繪製時分秒針*/ drawAllHands: function(ctx) { let time = new Date(); let s = time.getSeconds(); let m = time.getMinutes(); let h = time.getHours(); let pi = Math.PI; let secondAngle = pi / 180 * 6 * s; //計算出來s針的弧度 let minuteAngle = pi / 180 * 6 * m + secondAngle / 60; //計算出來分針的弧度 let hourAngle = pi / 180 * 30 * h + minuteAngle / 12; //計算出來時針的弧度 myAction.drawHand(hourAngle, 60, 6, "red", ctx); //繪製時針 myAction.drawHand(minuteAngle, 106, 4, "green", ctx); //繪製分針 myAction.drawHand(secondAngle, 129, 2, "blue", ctx); //繪製秒針 }, /*繪製時針、或分針、或秒針 * 引數1：要繪製的針的角度 * 引數2：要繪製的針的長度 * 引數3：要繪製的針的寬度 * 引數4：要繪製的針的顏色 * 引數4：ctx * */ drawHand: function(angle, len, width, color, ctx) { ctx.save(); ctx.translate(150, 150); //把座標軸的遠點平移到原來的中心 ctx.rotate(-Math.PI / 2 + angle); //旋轉座標軸。 x軸就是針的角度 ctx.beginPath(); ctx.moveTo(-4, 0); ctx.lineTo(len, 0); // 沿著x軸繪製針 ctx.lineWidth = width; ctx.strokeStyle = color; ctx.lineCap = "round"; ctx.stroke(); ctx.closePath(); ctx.restore(); }, /*繪製錶盤*/ drawDial: function() { var pi = Math.PI; ctx.clearRect(0, 0, 300, 300); //清除所有內容 ctx.save(); ctx.translate(150, 150); //一定座標原點到原來的中心 ctx.beginPath(); ctx.arc(0, 0, 148, 0, 2 * pi); //繪製圓周 ctx.stroke(); ctx.closePath(); for (var i = 0; i < 60; i++) { //繪製刻度。 ctx.save(); ctx.rotate(-pi / 2 + i * pi / 30); //旋轉座標軸。座標軸x的正方形從 向上開始算起 ctx.beginPath(); ctx.moveTo(110, 0); ctx.lineTo(140, 0); ctx.lineWidth = i % 5 ? 2 : 4; ctx.strokeStyle = i % 5 ? "blue" : "red"; ctx.stroke(); ctx.closePath(); ctx.restore(); } ctx.restore(); } }); var init = function() { myAction.initCanvas(); }(); }) </script> </body> </html>