通过canvas画布画动态时钟

笔记:

效果图：

步骤：
1.canvas是一个画图的容器，里面没有图形，需要你自己加上图形
先定义好canvas的宽、高

2.定义js函数实现时钟动画，具体步骤如下：
1）获取画布的id，然后通过getContext() 方法返回一个用于在画布上绘图的环境。
语法：Canvas.getContext(contextID)。定义好宽、高、半径。
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘
图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

2）定义好画图背景，现将圆画出来-》在画上面的数字=》然后画刻度
a、每画一部分都需要用beginPath() 方法开始一条路径，或重置当前的路径。
b、设置好线宽之后画圆，画圆采用arc()函数。arc()创建弧/曲线（用于创建圆形或部分圆）该函数
有五个参数，但这画了圆还不能显示出来，所以请使用 stroke() 或 fill() 方法在画布上绘制实际的
弧。stroke()和fill() 的区别是：stroke()是绘制已定义的路径，画线。  而fill()是填充当前绘图（路
径）
c、画时钟上的数字。用数组存储数字，因为画圆是从x轴顺时针画，所以数字是从3开始，所以数
组这样存数字：var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2]; 对每一个数字，根据它的x,y坐标
画，首先计算弧度，然后根据弧度计算x,y。最后采用fillTex（）在画布上绘制“被填充的”文本，
即对应的数字
d、画对应的刻度。   也是同样的道理，获取弧度，根据弧度获取x,y轴，然后画刻度。因为每个数
字之间相隔5个点，所以每五个点的颜色不同。

3）画时针
画之前先保存当前状态，以免受变化后的画布影响。
先用lineWidt画一条线，再用lineCap设置或返回线条的结束端点样式，通过moveTo把路径移动
到画布中的指定点。lineTo添加一个新点，然后在画布中创建从该点到最后指定点的线条,但该方法
并不会创建线条。请使用 stroke() 方法在画布上绘制确切的路径。

4）画分针
与画时针同样的方法，但要注意设置不同的样式

5）画秒针

与画分钟相同的方法

6）画三根时针上的小圆孔

这样可以更逼真，小圆孔利用arc()函数实现

7）获取当前本地时间。通过new一个date来获取，now.getHours、now.getMinutes()、
getSeconds()。再分别调用之前定义的函数

8）调用setInterval(draw,1000)，每一秒钟执行一次。实现动画效果。但是要先运行一次，获取本
地时间，不然刷新时会出现一会儿空白。

 

var dom=document.getElementById('clock');
var ctx=dom.getContext('2d');  //返回一个用于在画布上绘图的环境,该方法返回一个环境变量
var width=ctx.canvas.width;
var height=ctx.canvas.height;
var r=width/2;
var rem=width/200;  //比例因子，当画布变大或缩小时，指针大小也随之变化


function drawBackground(){
	ctx.save();     //保存当前状态
	ctx.translate(r,r);  //旋转画布
	ctx.beginPath();    //beginPath() 方法开始一条路径，或重置当前的路径。
	ctx.lineWidth=10*rem;//设置线宽
	ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false);  //创建弧/曲线（用于创建圆形或部分圆）
	ctx.stroke();   //	绘制已定义的路径
	// ctx.drawImage('img/4.jpg');
	ctx.textAlign='center'; //	设置或返回文本内容的当前对齐方式
	ctx.textBaseline='middle'; //	设置或返回在绘制文本时使用的当前文本基线
	var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];  //为什么这样定义，因为画圆时，是从3开始顺时针旋转
	ctx.font=18*rem+'px Arial';  //	设置或返回文本内容的当前字体属性
	hourNumbers.forEach(function(number,i){      //number,i对应数字和索引
		var rad=2*Math.PI / 12*i;          //定义弧度
		var x=Math.cos(rad)*(r-30*rem);    //根据弧度求x轴
		var y=Math.sin(rad)*(r-30*rem);    //根据弧度求y轴
		ctx.fillText(number,x,y);          //在画布上绘制“被填充的”文本

	});

	for(i=0;i<60;i++){                             
		var rad=2*Math.PI/60*i;                     //画时钟的60个点
		var x=Math.cos(rad)*(r-18*rem);
		var y=Math.sin(rad)*(r-18*rem);
		ctx.beginPath();
		if (i%5==0) {
			ctx.fillStyle='#c14543';                   //每五个点对应一个数字刻度，设置填充样式为红色
			ctx.arc(x,y,2*rem,0,2*Math.PI,false);
		}
		else{
			ctx.fillStyle='#ccc';                      //其余的点填充为灰色
			ctx.arc(x,y,2*rem,0,2*Math.PI,false);
		}
		// sctx.arc(x,y,2,0,2*Math.PI,false);
		ctx.fill();
	}

}

function drawHour(hour,minute){
	ctx.save();
	ctx.beginPath();
	var rad=2*Math.PI/12*hour;
	var mrad=2*Math.PI/12/60*minute;
	ctx.rotate(rad+mrad);
	ctx.lineWidth=6*rem;
	ctx.lineCap='round';  //设置或返回线条的结束端点样式
	ctx.moveTo(0,10*rem);//往上移一点
	ctx.lineTo(0,-r/2);  //负数往上，正数往下
	ctx.stroke();
}

function drawMinute(minute){
	ctx.restore();
	ctx.save();
	ctx.beginPath();
	var rad=2*Math.PI/60*minute;
	ctx.rotate(rad);
	ctx.lineWidth=3*rem;
	ctx.lineCap='round';
	ctx.moveTo(0,10*rem);
	ctx.lineTo(0,-r+30*rem);  //负数往上，正数往下
	ctx.stroke();
	ctx.restore();
}

function drawSecond(second){
	ctx.save();
	ctx.beginPath();
	ctx.fillStyle='#c14543';
	var rad=2*Math.PI/60*second;
	ctx.rotate(rad);
	ctx.moveTo(-2*rem,20*rem);
	ctx.lineTo(2*rem,20*rem);  //负数往上，正数往下
	ctx.lineTo(1,-r+18*rem);
	ctx.lineTo(-1,-r+18*rem);
	ctx.fill();
	ctx.restore();
}

function drawDot(){
	ctx.beginPath();
	ctx.fillStyle='#fff';
	ctx.arc(0,0,3*rem,0,2*Math.PI,false);
	ctx.fill();
}
// drawBackground();


function draw(){
	ctx.clearRect(0,0,width,height);  //每一秒清除一下矩形，不然钟表走过的痕迹都会留下来。
	var now= new Date();
	var hour=now.getHours();
	var minute=now.getMinutes();
	var second=now.getSeconds();
	drawBackground();
	drawHour(hour,minute);
	drawMinute(minute);
	drawSecond(second);	
	drawDot();
	ctx.restore();
	
}
draw()
setInterval(draw,1000);  //每一秒调用一次