廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>canvas_time</title> <style type=text/css> div { text-align: center; margin-top: 250px; } #clock { border: 1px solid #cccccc; } </style></head><body> <div> <canvas id=clock height=600px width=600px></canvas> </div> <script type=text/JavaScript >var dom = document.getElementById('clock');var ctx = dom.getContext('2d');var width = ctx.canvas.width;var height = ctx.canvas.height;var r = width / 2;var rem = width/200;function drawBackground() { ctx.save(); //存儲當前環境變量； ctx.translate(r, r); //重置坐標到r，r ctx. beginPath(); // 起始一條路徑ctx.lineWidth = 10*rem; //設置線寬10； ctx.arc(0, 0, r - ctx.lineWidth /2, 0, 2 * Math.PI, false ); ctx.stroke(); var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; //定義數組ctx.font = 18*rem+px Arial; ctx.textAlign = center; ctx.textBaseline = middle; hourNumbers.forEach(function(number, i) { var rad = 2 * Math.PI / 12 * i; var x = Math.cos(rad) * (r - 30*rem); var y = Math.sin(rad) * (r - 30*rem); ctx.fillText(number, x, y); }); for (var i = 0; i < 60; i++ ) { var rad = 2 * Math.PI / 60 * i; var x = Math.cos(rad) * (r - 18*rem); var y = Math.sin(rad) * (r - 18*rem) ; ctx.beginPath(); if (i % 5 === 0) { ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false); ctx.fillStyle = #000; } else { ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false); ctx.fillStyle = #ccc; } ctx.fill(); }} function drawHour(hour, minute) { ctx. save(); ctx.beginPath(); var rad = 2 * Math.PI / 12 * hour; var mrad = 2 * Math.PI / 12 / 60 * minute; ctx.rotate(rad + mrad); ctx.lineWidth = 6*rem; ctx.lineCap = round; ctx.moveTo(0, 10*rem); ctx.lineTo(0, -r / 2); ctx.stroke(); ctx.restore(); } function drawMinute( minute) { ctx.save(); ctx.beginPath(); var rad = 2 * Math.PI / 60 * minute; ctx.rotate(rad); ctx.lineWidth = 3*rem; ctx.lineCap = round; ctx .moveTo(0, 10*rem); ctx.lineTo(0, -r + 30*rem); ctx.stroke(); ctx.restore(); } function drawSecond(second) { ctx.save(); ctx .beginPath(); ctx.fillStyle = 'red'; var rad = 2 * Math.PI / 60 * second; ctx.rotate(rad); ctx.moveTo(-2*rem, 20*rem); ctx.lineTo (2*rem, 20*rem); ctx.lineTo(1, -r + 16*rem); ctx.lineTo(-1, -r + 16*rem); ctx.fill(); ctx.restore() ; } function drawDot() { ctx.beginPath(); ctx.fillStyle = '#fff'; ctx.arc(0, 0, 3*rem, 0, 2 * Math.PI, false); ctx.fill() ; } function draw01() { ctx.clearRect(0, 0, width, height); var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now .getSeconds(); drawBackground(); drawHour(hour, minute); drawMinute(minute); drawSecond(second); drawDot(); ctx.restore(); } draw01(); setInterval(draw01, 1000);</ script></body></html>總結以上所述是小編給大家介紹的HTML5實現可縮放時鐘代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！