Zegar analogowy
Listing
var cv = document.getElementById("canvas"); var ctx = cv.getContext("2d"); var width = cv.width; var height = cv.height; function Clock() { }; Clock.prototype.drawClock = function() { var date = new Date(); var hh = date.getHours(); var mm = date.getMinutes(); var ss = date.getSeconds(); ctx.save(); ctx.beginPath(); var grd = ctx.createLinearGradient(width / 5, width / 5, width / 1.5, width / 1.5); grd.addColorStop(0, "white"); grd.addColorStop(1, "silver"); ctx.fillStyle = grd; ctx.arc(width / 2, height / 2, width / 3, 0, 2 * Math.PI, false); ctx.fill(); ctx.beginPath(); ctx.lineWidth = 3; ctx.strokeStyle = "gray"; ctx.arc(width / 2, height / 2, width / 3, 0, 2 * Math.PI, false); ctx.stroke(); ctx.beginPath(); ctx.fillStyle = "gray"; ctx.translate(240, 240); for (var i = 1; i < 13; i++) { ctx.beginPath(); ctx.rotate(Math.PI / 6); ctx.fillRect(-3, -150, 6, 30); } ctx.setTransform(1,0,0,1,0,0); ctx.restore(); ctx.save(); var angle = Math.PI*(hh+mm/60.0)/6.0-Math.PI/2.0; ctx.beginPath(); ctx.translate(240,240); ctx.rotate(angle); ctx.lineWidth=5; ctx.lineCap="round"; ctx.lineJoin ="round"; ctx.moveTo(0,0); ctx.lineTo(80,0); ctx.translate(-240,-240); ctx.stroke(); ctx.restore(); // ctx.save(); var angle=Math.PI*mm/30.0-Math.PI/2; ctx.beginPath(); ctx.translate(240,240); ctx.rotate(angle); ctx.lineWidth=5; ctx.lineCap="round"; ctx.lineJoin ="round"; ctx.moveTo(0,0); ctx.lineTo(120,0); ctx.translate(-240,-240); ctx.stroke(); ctx.restore(); // ctx.save(); var angle = Math.PI*ss/30.0-Math.PI/2; ctx.beginPath(); ctx.translate(240,240); ctx.rotate(angle); ctx.lineWidth=2; ctx.lineCap="round"; ctx.lineJoin ="round"; ctx.moveTo(0,0); ctx.lineTo(120,0); ctx.translate(-240,-240); ctx.stroke(); ctx.restore(); }; var clock = new Clock(); var timer = setInterval("clock.drawClock()", 500);