说到HTML5，我们就要首先知道Canvas标签，这个标签定义了一块画布，所有图形的画面都要在这块画布上呈

现出来。其实光有Canvas是做不了任何事的，学过Windows的人都知道，在Windows里面绘图要先得到一个设

备上下文DC，在Canvas里面绘图同样要得到一个渲染上下文，在HTML5中，我们的图形并不是直接画到屏幕上

的，而是先画到一个上下文上，然后再刷新到屏幕上的。在Canvas中，我们通过语句getContext('2d')方法

返回一个CanvasRenderingContext2D对象，即渲染上下文对象，然后通过调用它的方法来实现Canvas绘图。


Canvas实现模拟电子时钟，代码如下


clock.html

<!doctype html>
<html>
	<head></head>
    <body>
	    <!-- 定义canvas画布，包括宽度和高度，还有背景颜色 -->
	    <canvas id="clock" width="1350" height="620" style="background:black">
		    你的浏览器不支持canvas标！
		</canvas>

		<!-- 用src引用js源文件 -->
		<script src="clock.js">
		</script>

	</body>
</html>


clock.js



//获取上下文文档对象
var clock = document.getElementById('clock');
var cxt = clock.getContext('2d');

//画指针
function drawPointer(width, color, value, angle, startx, starty, endx, endy){
	cxt.save();                 //先保存当前画布
	cxt.lineWidth = width;      //设置画笔的宽度
	cxt.strokeStyle = color;    //设置画笔的颜色
	cxt.translate(550, 310);    //重置异次元空间的原点坐标
	cxt.rotate(value * angle * Math.PI / 180);  //设置旋转的角度，参数是弧度
	cxt.beginPath();
	cxt.moveTo(startx, starty);
	cxt.lineTo(endx, endy);
	cxt.closePath();            //先闭合路径，再画线
	cxt.stroke();               //开始画线
	cxt.restore();              //将旋转后的线段返回给画布
}

//画刻度
function drawScale(size, width, color, value, startx, starty, endx, endy){
	for(var i = 0; i < size; i++){
		drawPointer(width, color, value, i, startx, starty, endx, endy);
	}
}

//为表盘的中心填充颜色
function drawFill(){
	cxt.save();
	cxt.beginPath();
	cxt.arc(550, 310, 7, 0, 360, false);
	cxt.closePath();
	cxt.fillStyle = "red";
	cxt.fill();
	cxt.restore();
}

//画时钟
function drawClock(){
	cxt.clearRect(0, 0, 1350, 620);  //清空整个画布

	var now = new Date();            //获取系统时间，取出时,分,秒
	var sec = now.getSeconds();
	var min = now.getMinutes();
	var hour = now.getHours();
	min += sec / 60;
	hour += min / 60;
	if(hour > 12) hour -= 12;

	cxt.beginPath();
	cxt.lineWidth = 10;
	cxt.strokeStyle = "blue";
	cxt.arc(550, 310, 300, 0, 360, false);
	cxt.closePath();
	cxt.stroke();

	drawScale(12, 7, "pink", 30, 0, -280, 0, -260);      //画时刻度
	drawScale(60, 5, "pink", 6,  0, -280, 0, -270);      //画分刻度
	drawPointer(7, "purple", hour, 30, 0, 12, 0, -210);  //画时针
	drawPointer(5, "yellow", min, 6, 0, 15, 0, -240);    //画分针
	drawPointer(4, "red", sec, 6, 0, 17, 0, -250);       //画秒针

	//细化秒针,为秒针加箭头
	drawPointer(3, "red", sec, 6, -7, -235, 0, -255);
	drawPointer(3, "red", sec, 6, 7, -235, 0, -255);
	drawFill();
}

drawClock();
setInterval(drawClock, 1000);   //setInterval()方法中表示每隔1000ms，就执行drawClock一次

 

运行结果：

第一个Canvas实例-钟表_Windows