代码如下：
<!doctype html> <html lang="en" > <head> <meta charset="utf-8" /> <title>html5 时钟</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <style> .clocks { height: 500px; margin: 25px auto; position: relative; width: 500px; } </style> </head> <body> <header> <h2>html5 时钟</h2> </header> <p class="clocks"> <canvas id="canvas" width="500" height="500"></canvas> </p> </body> </html>
[javascript]代码// inner variables var canvas, ctx; var clockradius = 250; var clockimage; // draw functions : function clear() { // clear canvas function ctx.clearrect(0, 0, ctx.canvas.width, ctx.canvas.height); } function drawscene() { // main drawscene function clear(); // clear canvas // get current time 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; // save current context ctx.save(); // draw clock image (as background) ctx.drawimage(clockimage, 0, 0, 500, 500); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.beginpath(); // draw numbers 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.7 * math.cos(theta); var y = clockradius * 0.7 * math.sin(theta); ctx.filltext(n, x, y); } // draw hour 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(); // draw minute 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(); // draw second 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(); } // initialization $(function(){ canvas = document.getelementbyid('canvas'); ctx = canvas.getcontext('2d'); // var width = canvas.width; // var height = canvas.height; clockimage = new image(); clockimage.src = 'http://static.oschina.net/uploads/space/2012/0712/125855_nnla_89964.png'; setinterval(drawscene, 1000); // loop drawscene });
以上就是介绍一个用html5 canvas 制作的时钟的详细内容。