<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5 canvas超逼真的模拟时钟特效效果演示</title> <meta charset="utf-8" /> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("canvas"); var cobj = canvas.getContext("2d"); var centerX = 200; var centerY = 200; var radius = 150; function initClock() { cobj.clearRect(0, 0, canvas.width, canvas.height); var datetime = new Date(); var hh = datetime.getHours(); var mm = datetime.getMinutes(); var ss = datetime.getSeconds(); //hh var hhDu = hh * (360 / 12) - 90 + ((mm / 60) * 30); var xH = ((radius - 65) * Math.cos(Math.PI / 180 * hhDu)) + centerX; var yH = ((radius - 65) * Math.sin(Math.PI / 180 * hhDu)) + centerY; drawLine(centerX, centerY, xH, yH, "#222222", 10); //mm var mmDu = mm * (360 / 60) - 90; var xM = ((radius - 35) * Math.cos(Math.PI / 180 * mmDu)) + centerX; var yM = ((radius - 35) * Math.sin(Math.PI / 180 * mmDu)) + centerY; drawLine(centerX, centerY, xM, yM, "#222222", 6); //ss var ssDu = ss * (360 / 60) - 90; var xS = ((radius - 20) * Math.cos(Math.PI / 180 * ssDu)) + centerX; var yS = ((radius - 20) * Math.sin(Math.PI / 180 * ssDu)) + centerY; drawLine(centerX, centerY, xS, yS, "#F3A829", 2); for (var i = 0; i < 12; i++) { var begX = (radius * Math.cos(Math.PI / 180 * (30 * i))) + centerX; var begY = (radius * Math.sin(Math.PI / 180 * (30 * i))) + centerY; var endX = ((radius - 10) * Math.cos(Math.PI / 180 * (30 * i))) + centerX; var endY = ((radius - 10) * Math.sin(Math.PI / 180 * (30 * i))) + centerY; drawLine(begX, begY, endX, endY, "#000", 5); var x = ((radius - 30) * Math.cos(Math.PI / 180 * (30 * i))) + centerX; var y = ((radius - 30) * Math.sin(Math.PI / 180 * (30 * i))) + centerY; var h = i + 3; h = (h % 12); if (h == 0) h = 12; x -= 5; y += 5; drawFont(x, y, h); } for (var i = 0; i < 60; i++) { var begX = (radius * Math.cos(Math.PI / 180 * (6 * i))) + centerX; var begY = (radius * Math.sin(Math.PI / 180 * (6 * i))) + centerY; var endX = ((radius - 5) * Math.cos(Math.PI / 180 * (6 * i))) + centerX; var endY = ((radius - 5) * Math.sin(Math.PI / 180 * (6 * i))) + centerY; drawLine(begX, begY, endX, endY, "#000", 2); } cobj.fillStyle = "#F3A829"; cobj.lineWidth = 0; cobj.arc(centerX, centerY, 10, 0, 360, false); cobj.fill(); function drawLine(begX, begY, endX, endY, color, width) { cobj.beginPath(); cobj.strokeStyle = color; cobj.lineWidth = width; cobj.lineCap = "round"; cobj.moveTo(begX, begY); cobj.lineTo(endX, endY); cobj.stroke(); cobj.closePath(); } function drawFont(x, y, text) { cobj.font = '20px helvetica'; cobj.fillText(text, x, y); } } setInterval(initClock, 1000); }; </script> </head> <body> <canvas id="canvas" width="400" height="400"> 您的浏览器不支持 </canvas> </body> </html>
