canvas时钟

canvas是HTML5新增的组件，提供了新的javascript API。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。canvas就像是页面上的一块画布，而javascript是一支笔，可以在画布上绘制多种多样的图形，丰富了前端开发方式，为前段的发展注入了新的活力。canvas默认宽高是300px * 150px，且必须在行内设置宽高。步入正题：

 

最近几天研究了下如何用canvas绘制时钟，github地址：https://github.com/lishuai336/canvasClock

首先创建画布：Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 <canvas>, Internet Explorer 从IE9开始<canvas> 。Chrome和Opera 9+ 也支持 ，canvas标签的内容在不支持canvas的浏览器才会显示。

<div>
    <canvas id="clock" width="300" height="300">您的浏览器不支持canvas，请升级浏览器        
    </canvas>
</div>

1.  getContext("2d")获得2d上下文

canvas本身并没有提供太多的API，绘图的各种API主要来自getContext对象。"2d", 是建立一个 CanvasRenderingContext2D 二维渲染上下文。在未来，如果 canvas 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 "3d" 字符串参数。不过越来越多的浏览器开始支持webGL，也就是浏览器端的3D标准，它直接借助系统显卡来渲染 3D 场景，所以getContext（“3d”）的时代很可能不会出现。不过，利用透视现象可以用getContext（“2d”）绘制出3D的视觉效果，emmm，这个有点厉害。 

 

	var canvasClock = document.getElementById("clock");
	var canvasContext = canvasClock.getContext("2d");		//getContext返回一个对象，该对象提供了用于在画布上绘图的方法和属性
	var canvasWidth = canvasContext.canvas.width;
	var canvasHeight = canvasContext.canvas.height;
	var radius = canvasWidth / 2;                        //圆的半径

2. 绘制时钟的外围圆形

translate(x,y)设置画布的原点，也就是画画起笔的位置，lineWidth线条宽度，arc(x,y,r,sAngle,eAngle,counterclockwise)，绘制圆形，里面几个参数分别代表：圆心坐标，圆半径，起始角（以弧度计，弧的圆形的三点钟位置是 0 度），结束角，顺时针还是逆时针。stroke（）绘制定义的路径。

canvasContext.translate(radius, radius);        					//移动画布原点到中心点
canvasContext.beginPath();										//beginPath 开始一条路径，或者重置一条路径
canvasContext.lineWidth = 8;									//线条宽度
canvasContext.arc(0, 0, radius - canvasContext.lineWidth / 2, 0, 2*Math.PI, false); 		//创建圆形路径s
canvasContext.stroke();      									//绘制已定义的路径

 3.  绘制12个数字

1个小时的弧度是2π / 12 ，起始角是在3点处，所以数组第一个数从3开始。知道圆的半径，和每个点的弧度数，就可以通过sin和cos计算出每个数字的坐标。textAlign文字水平对齐方式，textBaseline设置文字基线（可以理解为文字垂直对齐方式）。

		var hourNumber = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
		canvasContext.font = 18  + "px Microsoft YaHei";			//设置文本大小
		canvasContext.textAlign = "center";						//设置文本水平对其方式
		canvasContext.textBaseline = "middle";					//设置文本垂直对齐方式
		hourNumber.forEach(function(number, i){
			var radian = 2 * Math.PI / 12 * i;            		    //每个小时的弧度
			var radianX = (radius - 30) * Math.cos(radian);		//每个小时X坐标
			var radianY = (radius - 30) * Math.sin(radian);     //每个小时Y坐标
			canvasContext.fillText(number, radianX, radianY);	    //绘制“被填充的”文本
		});

 4.  绘制60个刻度

 这和绘制12个数字一样，不过每个刻度的弧度是2π / 60，12个时刻点的颜色做个区分。fillStyle填充绘画的颜色。

       for(var i = 0; i < 60; i++){
			var radian = 2 * Math.PI / 60 * i;
			var x = (radius - 16) * Math.cos(radian);
			var y = (radius - 16) * Math.sin(radian);
			canvasContext.beginPath();
			if(i % 5 == 0){
				canvasContext.fillStyle = "#000";
			}
			else{
				canvasContext.fillStyle = "#ccc";
			}
			canvasContext.arc(x, y, 2, 0, 2 * Math.PI, false);
			canvasContext.fill();
		}

 5.  绘制时针

 时针运动时的旋转角度=当前时间的小时数+分针数+秒针数。由于时钟每秒变动一次，实则每一秒都要重新绘制一次画布内容。所以每次在执行之前都要保存下最开始的画布环境save()；绘制完成后还原画布环境restore()。

	function drawHour(hour, minutes, seconds){
		canvasContext.save();                        //保存绘画前的画布环境
		canvasContext.beginPath();
		var radianHour = 2 * Math.PI / 12 * hour;
		var radianMinutes = 2 * Math.PI / 12 / 60 * minutes
		var radianSeconds = 2 * Math.PI / 12 / 60 / 60 * seconds;
		canvasContext.rotate(radianHour + radianMinutes + radianSeconds);
		canvasContext.lineWidth = 6 * rem;
		canvasContext.lineCap = "round";
		canvasContext.moveTo(0, 10 * rem);
		canvasContext.lineTo(0, -radius / 2);
		canvasContext.stroke();
		canvasContext.restore();					//还原初始画布环境
	}

  6.  绘制分针

 分针同理，rotate()画布旋转角度。

function drawMinute(minutes, seconds){
		canvasContext.save();
		canvasContext.beginPath();
		var radianMinutes = 2 * Math.PI / 60 * minutes;
		var radianSeconds = 2 * Math.PI / 60 / 60 * seconds;
		canvasContext.rotate(radianMinutes + radianSeconds);
		canvasContext.lineWidth = 4 * rem;
		canvasContext.lineCap = "round";
		canvasContext.moveTo(0, 12 * rem);
		canvasContext.lineTo(0, -radius + 30 * rem);
		canvasContext.stroke();
		canvasContext.restore();
	}

  7.  绘制秒针

秒针绘制成头尖尾宽的红色梯形。 

	function drawSeconds(seconds){
		canvasContext.save();
		canvasContext.beginPath();
		canvasContext.fillStyle = "#c14543";
		var radian = 2 * Math.PI / 60 * seconds;
		canvasContext.rotate(radian);
		canvasContext.moveTo(2 * rem, 20 * rem);
		canvasContext.lineTo(-2 * rem, 20 * rem);
		canvasContext.lineTo(-1 * rem, -radius + 18 * rem);
		canvasContext.lineTo(1 * rem, -radius + 18 * rem);
		canvasContext.fill();
		canvasContext.restore();
	}

8.  仿螺丝

在时针中心绘制一个白点，用于模仿固定钟表指针的螺丝。 

	function drawDot(){
		canvasContext.save();
		canvasContext.beginPath();
		canvasContext.fillStyle = "#fff";
		canvasContext.arc(0, 0, 2 * rem, 0, 2 * Math.PI, false);
		canvasContext.fill();
		canvasContext.restore();
	}

9.  绘制函数

clearRect() 清空给定矩形内的指定像素，每次绘制的画面都不相同，避免画面叠加。

	function draw(){
		canvasContext.clearRect(0, 0, canvasWidth, canvasHeight);
		var now = new Date();
		var hour = now.getHours();
		var minutes = now.getMinutes();
		var seconds = now.getSeconds();
		drawBackground();
		drawHour(hour, minutes, seconds);
		drawMinute(minutes, seconds);
		drawSeconds(seconds);
		drawDot();
		canvasContext.restore();
	}

10.  执行绘制函数

实际上这种方法的绘制总会比系统时间慢一点，因为还有毫秒的误差没有处理。

	draw();
	setInterval(draw, 1000);