Untitled

<html>
<head>
Zegar
</head>

<body>
<p>
<canvas id="window" width="600" height= "600" style="border:1px solid#AAAAAA;">
</canvas>

<script>


var canvas = document.getElementById("window");
var context = canvas.getContext ("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 100;

/* Pierwsza polowa */
var sAngle = 1.5 * Math.PI;
var eAngle = 0.5 * Math.PI;

context.beginPath();
context.arc(x,y,radius,sAngle,eAngle);
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();

/*Druga polowa */
var sAngle = 0.5 * Math.PI;
var eAngle = 1.5 * Math.PI;

context.beginPath();
context.arc(x,y,radius,sAngle,eAngle);
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();

//godzina 12
context.beginPath();
context.moveTo(x,y-95);
context.lineTo(x,y-70);
context.stroke();

//godzina 3
context.beginPath();
context.moveTo(x+95,y);
context.lineTo(x+70,y);
context.stroke();

//godzina 6
context.beginPath();
context.moveTo(x,y+95);
context.lineTo(x,y+70);
context.stroke();

//godzina 9
context.beginPath();
context.moveTo(x-95,y);
context.lineTo(x-70,y);
context.stroke();

//godzina 1
context.beginPath();
context.save ();
context.rotate(Math.PI / 4);
//context.translate(x+75,y);
context.moveTo(x+50,y);
context.lineTo(x+100,y);

context.stroke();


</script>


</p>
</body>
</html>