Zegar analogowy (HTML5 canvas)

Zegar analogowy

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

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);