function manito(ctx, w, h, l, a)
{
	ctx.beginPath();
	ctx.moveTo(w / 2, h / 2);
	ctx.lineTo(w / 2 + Math.cos(a) * (w/2) * l, w / 2 + Math.sin(a) * (h/2) * l);
	ctx.stroke();
}

function dibujar()
{
	var ahora = new Date();
	var w = 100, h = 100;
	var r = document.getElementById("reloj");
	if(!r)
		return;
	if(!r.getContext)
		return;
	var ctx = r.getContext("2d");
	ctx.clearRect(0, 0, w, h);
	ctx.lineWidth=2;
	ctx.beginPath();
	ctx.arc(w/2.0, h/2.0, (w/2) * .9, 0 , Math.PI * 2, false);
	ctx.stroke();


	ctx.shadowOffsetX = 2;
	ctx.shadowOffsetY = 2;
	ctx.shadowBlur = 2;
	ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

	var a = ((ahora.getSeconds() + ahora.getMilliseconds() / 1000.0) / 60.0) * 2 * Math.PI + Math.PI*1.5;
	ctx.strokeStyle="gray";
	ctx.lineWidth=1;
	manito(ctx, w, h, 1, a);
	a = ((ahora.getHours() + ahora.getMinutes()/60.0) % 12.0 / 12.0) * 2.0 * Math.PI + Math.PI*1.5;
	ctx.lineWidth=2;
	ctx.strokeStyle="black";
	manito(ctx, w, h, .6, a);
	a = (ahora.getMinutes() / 60.0) * 2 * Math.PI + Math.PI*1.5;
	manito(ctx, w, h, .8, a);
}

setInterval(dibujar, 100);