<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 timer</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
.clocks { height: 500px; margin: 25px auto; position: relative; width: 500px; } </style> </head> <body> <header> <h2>HTML5 timer</h2> </header> <div> <canvas width="500" height="500"></canvas> </div> </body></html>
<script>var canvas, ctx;
var clockRadius = 250;var clockImage;
function clear() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);}function drawScene() { clear(); var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); hours = hours > 12 ? hours - 12 : hours; var hour = hours + minutes / 60; var minute = minutes + seconds / 60; ctx.save(); ctx.drawImage(clockImage, 0, 0, 500, 500); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.beginPath(); ctx.font = "36px Arial"; ctx.fillStyle = "#000"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; for (var n = 1; n <= 12; n++) { var theta = (n - 3) * (Math.PI * 2) / 12; var x = clockRadius * 0.9 * Math.cos(theta); var y = clockRadius * 0.9 * Math.sin(theta); ctx.fillText(n, x, y); } ctx.save(); var theta = (hour - 3) * 2 * Math.PI / 12; ctx.rotate(theta); ctx.beginPath(); ctx.moveTo(-15, -5); ctx.lineTo(-15, 5); ctx.lineTo(clockRadius * 0.5, 1); ctx.lineTo(clockRadius * 0.5, -1); ctx.fill(); ctx.restore(); ctx.save(); var theta = (minute - 15) * 2 * Math.PI / 60; ctx.rotate(theta); ctx.beginPath(); ctx.moveTo(-15, -4); ctx.lineTo(-15, 4); ctx.lineTo(clockRadius * 0.8, 1); ctx.lineTo(clockRadius * 0.8, -1); ctx.fill(); ctx.restore(); ctx.save(); var theta = (seconds - 15) * 2 * Math.PI / 60; ctx.rotate(theta); ctx.beginPath(); ctx.moveTo(-15, -3); ctx.lineTo(-15, 3); ctx.lineTo(clockRadius * 0.9, 1); ctx.lineTo(clockRadius * 0.9, -1); ctx.fillStyle = "#0f0"; ctx.fill(); ctx.restore(); ctx.restore(); ctx.beginPath(); //畫筆開始 ctx.lineWidth = 5; //設定畫筆的線寬 ctx.strokeStyle="blue"; //設定畫筆的顏色 ctx.arc(250,250,248,0,360,false); //繪製圓形，座標250,250 半徑200，整圓（0-360度），false表示順時針 ctx.stroke(); //繪圖 ctx.closePath(); //結束畫布}$(function(){ canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); clockImage = new Image(); setInterval(drawScene, 1000);});</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 timer</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
.clocks { height: 500px; margin: 25px auto; position: relative; width: 500px; } </style> </head> <body> <header> <h2>HTML5 timer</h2> </header> <div> <canvas width="500" height="500"></canvas> </div> </body></html>
<script>var canvas, ctx;
var clockRadius = 250;var clockImage;
function clear() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);}function drawScene() { clear(); var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); hours = hours > 12 ? hours - 12 : hours; var hour = hours + minutes / 60; var minute = minutes + seconds / 60; ctx.save(); ctx.drawImage(clockImage, 0, 0, 500, 500); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.beginPath(); ctx.font = "36px Arial"; ctx.fillStyle = "#000"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; for (var n = 1; n <= 12; n++) { var theta = (n - 3) * (Math.PI * 2) / 12; var x = clockRadius * 0.9 * Math.cos(theta); var y = clockRadius * 0.9 * Math.sin(theta); ctx.fillText(n, x, y); } ctx.save(); var theta = (hour - 3) * 2 * Math.PI / 12; ctx.rotate(theta); ctx.beginPath(); ctx.moveTo(-15, -5); ctx.lineTo(-15, 5); ctx.lineTo(clockRadius * 0.5, 1); ctx.lineTo(clockRadius * 0.5, -1); ctx.fill(); ctx.restore(); ctx.save(); var theta = (minute - 15) * 2 * Math.PI / 60; ctx.rotate(theta); ctx.beginPath(); ctx.moveTo(-15, -4); ctx.lineTo(-15, 4); ctx.lineTo(clockRadius * 0.8, 1); ctx.lineTo(clockRadius * 0.8, -1); ctx.fill(); ctx.restore(); ctx.save(); var theta = (seconds - 15) * 2 * Math.PI / 60; ctx.rotate(theta); ctx.beginPath(); ctx.moveTo(-15, -3); ctx.lineTo(-15, 3); ctx.lineTo(clockRadius * 0.9, 1); ctx.lineTo(clockRadius * 0.9, -1); ctx.fillStyle = "#0f0"; ctx.fill(); ctx.restore(); ctx.restore(); ctx.beginPath(); //畫筆開始 ctx.lineWidth = 5; //設定畫筆的線寬 ctx.strokeStyle="blue"; //設定畫筆的顏色 ctx.arc(250,250,248,0,360,false); //繪製圓形，座標250,250 半徑200，整圓（0-360度），false表示順時針 ctx.stroke(); //繪圖 ctx.closePath(); //結束畫布}$(function(){ canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); clockImage = new Image(); setInterval(drawScene, 1000);});</script>