Html5画钟表盘/指针实时跳动
1、最终效果
时钟、分钟、秒指针连续移动
2、完整代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock in canvas</title> <script type="text/javascript" charset="utf-8" src="Scripts/Jquery/jquery-1.9.1.min.js"></script> <script> $(function () { var container = $('.container'); var clockPanel = $('.clockPanel', container).get(0); var ctx = clockPanel.getContext('2d'); var r = 100; var point = { X: 150, Y: 150 }; drawCircle(ctx, point, r); var clockPointer = $('.clockPointer', container).get(0); var ctxPointer = clockPointer.getContext('2d'); var run = function () { drawPointer(ctxPointer, point, r, new Date()); requestAnimFrame(run); } run(); }) function drawCircle(ctx, point, r) { ctx.beginPath(); ctx.arc(point.X, point.Y, r, 0, Math.PI * 2, true); ctx.stroke(); ctx.beginPath(); ctx.arc(point.X, point.Y, 4, 0, Math.PI * 2, true); ctx.fillStyle = "#ccc"; ctx.fill(); ctx.closePath(); for (var i = 0; i < 60; i++) { drawScale(ctx, point, r, 5, i); } } function drawScale(ctx, point, r, len, scale) { var angle = 360 * scale / 60 * 2 * Math.PI / 360 if (scale % 5 == 0) { len = len + 3 ctx.lineWidth = 3; } else { ctx.lineWidth = 1; } var sX = point.X - (r - len) * Math.sin(angle); var sY = point.Y - (r - len) * Math.cos(angle); var eX = point.X - r * Math.sin(angle); var eY = point.Y - r * Math.cos(angle); ctx.beginPath(); ctx.strokeStyle = "#ccc"; ctx.moveTo(sX, sY); ctx.lineTo(eX, eY); ctx.stroke(); ctx.closePath(); } function drawPointer(ctx, point, r, time) { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); var hours = time.getHours(); var minutes = time.getMinutes(); var seconds = time.getSeconds(); var minSec = time.getMilliseconds(); var angleS = 2 * Math.PI * (60 * 1000 - seconds * 1000 - minSec) / (60 * 1000); var esX = point.X - (r - 5) * Math.sin(angleS); var esY = point.Y - (r - 5) * Math.cos(angleS); var eSec = { X: esX, Y: esY }; drawLine(ctx, point, eSec, 1); var angleM = 2 * Math.PI * (60 * 60 - minutes * 60 - seconds) / (60 * 60); var emX = point.X - (r - 10) * Math.sin(angleM); var emY = point.Y - (r - 10) * Math.cos(angleM); var eMinu = { X: emX, Y: emY }; drawLine(ctx, point, eMinu, 2); var angleH = 2 * Math.PI * ((24 * 60 * 60 - hours * 60 * 60 - minutes * 60 - seconds) % (12 * 60 * 60)) / (12 * 60 * 60); var ehX = point.X - (r - 15) * Math.sin(angleH); var ehY = point.Y - (r - 15) * Math.cos(angleH); var eHour = { X: ehX, Y: ehY }; drawLine(ctx, point, eHour, 3); } function drawLine(ctx, pointS, pointE, lineWidth) { ctx.lineWidth = lineWidth; ctx.beginPath(); ctx.strokeStyle = "#808080"; ctx.moveTo(pointS.X, pointS.Y); ctx.lineTo(pointE.X, pointE.Y); ctx.stroke(); ctx.closePath(); } window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (run) { window.setTimeout(run, 16); }; })(); </script> <style> .container { width: 300px; height: 300px; /*background: orange;*/ margin: 0 auto; position: relative; } canvas { position: absolute; } </style> </head> <body> <div class="container"> <canvas class="clockPanel" height="300" width="300"></canvas> <canvas class="clockPointer" height="300" width="300"></canvas> </div> </body> </html>
3、实现重点
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (run) {
window.setTimeout(run, 16);
};
})();
