<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>canvas画时钟</title> <script> window.onload = function() { var canvas = document.getElementById("canvas"); canvas.width = canvas.height = 400; canvas.style.background = "white"; if (canvas.getContext) { var ext = canvas.getContext("2d"); drawClock() setInterval(drawClock, 1000); } function drawClock() { var x = 200; var y = 200; var r = 150; ext.clearRect(0, 0, canvas.width, canvas.height) var oData = new Date(); var hours = oData.getHours(); var minutes = oData.getMinutes(); var seconds = oData.getSeconds(); var hoursValue = (-90 + hours * 30 + minutes / 2) * Math.PI / 180; //分针过了30，时针不应该正好在整点上，2分钟一度； var minutesValue = (-90 + minutes * 6) * Math.PI / 180; var secondsValue = (-90 + seconds * 6) * Math.PI / 180; ext.lineWidth = 2 ext.arc(x, y, r, 0, Math.PI * 2, false); ext.stroke(); //画小刻度 for (var i = 0; i < 60; i++) { ext.strokeStyle = "black" ext.lineWidth = 1; ext.beginPath(); ext.moveTo(x, y); ext.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false) ext.closePath(); ext.stroke(); } drawBlankCircle(10) //画大刻度 for (var i = 0; i < 12; i++) { ext.lineWidth = 3; ext.strokeStyle = "green" ext.beginPath(); ext.moveTo(x, y); ext.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false) ext.closePath(); ext.stroke(); } drawBlankCircle(15) //画空白覆盖圆; function drawBlankCircle(d) { ext.fillStyle = "white" ext.beginPath(); ext.arc(x, y, r - d, 0, Math.PI * 2, false); ext.closePath(); ext.fill(); } //画时针; ext.lineWidth = 5; ext.strokeStyle = "#f90" ext.beginPath(); ext.moveTo(x, y); ext.arc(x, y, r - 60, hoursValue, hoursValue, false); ext.closePath(); ext.stroke(); //画分针; ext.lineWidth = 3; ext.strokeStyle = "red" ext.beginPath(); ext.moveTo(x, y); ext.arc(x, y, r - 40, minutesValue, minutesValue, false); ext.closePath(); ext.stroke(); //画秒针; ext.lineWidth = 1; ext.strokeStyle = "black" ext.beginPath(); ext.moveTo(x, y); ext.arc(x, y, r - 25, secondsValue, secondsValue, false); ext.closePath(); ext.stroke(); //画表盘中心小圆; ext.fillStyle = "black"; ext.beginPath(); ext.arc(x, y, 6, 0, Math.PI * 2, false); ext.closePath(); ext.fill(); } } </script> </head> <body > <canvas id="canvas"> </canvas> </body> </html>