Drawing Clock

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title> Canvas Clock drawing Demo </ title>
	<style>
	#myCanvas{
	border: 1px solid;
	}
	</style>
	</head>
	<body>
	<canvas id="myCanvas" width="500" height="400">
	Sorry, your browser does not support the canvas element
	</canvas>
	<script>
	var c = document.getElementById ( 'myCanvas'); // Get Object Canvas
	var ctx = c.getContext ( '2d'); // get the context
	function drawClock()
	{
	ctx.clearRect (0,0, c.width, c.height); // Clear canvas
	c.width = c.width; // needs to be reset when the clear width of the canvas, or there will be an overlap canvas
	var x = 250, y = 200, r = 180; // definition of the center coordinates of the disk and the disk radius
	/ * Get real time * /
	var objTime = new Date();
	was objHour objTime.getHours = ();
	was objMin objTime.getMinutes = ();
	was objSen objTime.getSeconds = ();
	/ * Convert radians specific time * /
	/*
	* Since the clock is counted from a start position of 12 o'clock, but the canvas is counted as 3 o'clock position of 0 degree, -90 degrees, so that the direction points to twelve
	* Hour is 30 degrees per hour apart, objMin / 2 in order to make more than half when the minute hand, the hour hand is between a corresponding two hours
	* Per minute and second hands are separated by 6 degrees
	*/
	var arcHour = (-90+objHour30 + objMin/2)Math.PI/180;
	was arcmin = (-90 + objMin * 6) * Math.PI / 180;
	There arcs An = (-90 + OBJS the * 6) * Math.PI / 180;
	/ * * Draw disc /
	ctx.beginPath ();
	for (var i = 0; i <60; i ++) // a total of 360 degrees, a total of 60 minutes, separated by 6 degrees per minute, 360/6 = 60
	{
	ctx.moveTo(x,y);
	ctx.arc(x,y,r,6iMath.PI/180,6(i+1)Math.PI/180,false);
	}
	ctx.closePath();
	ctx.stroke();
	/ * Draw white plate covering the lower line * /
	ctx.fillStyle = 'white';
	ctx.beginPath ();
	ctx.arc (x, y, r * 19 / 20,0,360 * Math.PI / 180, false); // value of the radius r of 20 19 per
	ctx.closePath();
	ctx.fill();
	/ * Yihuhuhuapiao produced every hour line * /
	/ * * Draw disc /
	ctx.beginPath ();
	ctx.lineWidth = 3;
	for (var i = 0; i <12; i ++) // a total of 360 degrees, a total of 12 hours apart, 30 degrees per hour, 360/30 = 12
	{
	ctx.moveTo(x,y);
	ctx.arc(x,y,r,30iMath.PI/180,30(i+1)Math.PI/180,false);
	}
	ctx.closePath();
	ctx.stroke();
	/ * Draw white plate covering the lower line * /
	ctx.fillStyle = 'white';
	ctx.beginPath ();
	ctx.arc(x,y,r18/20,0,360Math.PI/180,false);//半径取值为r的20分之18
	ctx.closePath();
	ctx.fill();
	/开始绘制时针分针和秒针,技巧就是起始弧度和结束弧度值一样/
	/开始绘制时针/
	ctx.beginPath();
	ctx.moveTo(x,y);
	ctx.lineWidth = 7;
	ctx.lineCap = 'round';
	ctx.arc(x,y,r*10/20,arcHour,arcHour,false);//半径取值为r的20分之10
	ctx.stroke();
	ctx.closePath();
	/开始绘制分针/
	ctx.beginPath();
	ctx.moveTo(x,y);
	ctx.lineWidth = 5;
	ctx.lineCap = 'round';
	ctx.arc(x,y,r*12/20,arcMin,arcMin,false);//半径取值为r的20分之12
	ctx.stroke();
	ctx.closePath();
	/开始绘制秒针/
	ctx.beginPath();
	ctx.moveTo(x,y);
	ctx.lineWidth = 2;
	ctx.lineCap = 'round';
	ctx.arc(x,y,r*16/20,arcSen,arcSen,false);//半径取值为r的20分之16
	ctx.stroke();
	ctx.closePath();
	}
	setInterval('drawClock()',1000);//每隔1秒调用绘制时钟函数
	</script>
	</body>
	</html>

Guess you like