使用canvas绘制动态时钟

本文参考：https://www.imooc.com/learn/612
先放一个运行动图给大家看看
在这里插入图片描述
此前未曾学过canvas，因觉着有趣便跟着课程学了一下，也对canvas有了更加深入的理解。

绘制时钟的几个步骤：
1、画表盘那个圆
2、画时钟边上那种小点
3、画1-2-3-4…-12这几个数字（本例子是从3-4-5-…-12-1-2）
4、画静态的指针
5、让指针动起来
6、在指针动起来后清除指针原来的图像
7、对时钟放大放小情况进行优化

代码如下：
HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
	<div>
		<canvas id="clock" height="200px" width="200px"></canvas>
	</div>


<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>

CSS

div{
	text-align: center;
	margin-top: 250px;
}
#clock{
	border: 0px solid #ccc;
}

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;

/*
	返回一个渐变色的gradient，用来绘制渐变色边框
	http://www.w3school.com.cn/tags/canvas_strokestyle.asp
*/
function getColorfulGradient() {
	var gradient = ctx.createLinearGradient(-r,r,r,-r);
	gradient.addColorStop("0","#2af598");
	gradient.addColorStop("1","#009efd");
	return gradient;
}

function drawBackground() {
	ctx.save();
	ctx.translate(r,r);
	ctx.beginPath();
	ctx.strokeStyle=getColorfulGradient();
	ctx.lineWidth = 10 * rem;
	ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false);
	ctx.stroke();

	var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];
	ctx.font = 18 * rem + 'px Arial';
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';
	hourNumbers.forEach(function(number, i) {
		var rad = 2 * Math.PI / 12 * i;
		var x = Math.cos(rad) * (r-30*rem);
		var y = Math.sin(rad) * (r-30*rem);
		ctx.fillText(number,x,y);
	});


	for (var i = 0; i < 60; i++){
		var rad = 2 * Math.PI / 60 * i;
		var x = Math.cos(rad) * (r-18*rem);
		var y = Math.sin(rad) * (r-18*rem);
		ctx.beginPath();
		if (i % 5 == 0){
			ctx.fillStyle = '#A770EF';
			ctx.arc(x,y,2*rem,0,2*Math.PI,false);
		}else{
			ctx.fillStyle = '#FDB99B';
			ctx.arc(x,y,2*rem,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 = 4*rem;
	ctx.lineCap = "round";
	ctx.moveTo(0,10*rem);
	ctx.lineTo(0,-r/2+5*rem);
	ctx.stroke();
	ctx.restore();
}

function drawMinute(minute) {
	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/2-2*rem);
	ctx.stroke();
	ctx.restore();
}

function drawSecond(second) {
	ctx.save();
	ctx.beginPath();
	var rad = 2 * Math.PI / 60 * second;
	ctx.rotate(rad);
	ctx.moveTo(-2,20*rem);
	ctx.lineTo(2,20*rem);
	ctx.lineTo(1,-r/2-18*rem);
	ctx.lineTo(-1,-r/2-18*rem);
	var gradient = ctx.createLinearGradient(0,20,0,-r/2-18);
	gradient.addColorStop("0","#f78ca0");
	gradient.addColorStop("0.19","#f9748f");
	gradient.addColorStop("0.6","#fd868c");
	gradient.addColorStop("1","#fe9a8b");
	ctx.fillStyle = gradient;
	ctx.fill();
	ctx.restore();
}

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


function draw() {
	ctx.clearRect(0,0,width,height);
	drawBackground();
	drawDot();
	var now = new Date();
	var hour = now.getHours();
	var minute = now.getMinutes();
	var second = now.getSeconds();
	drawHour(hour, minute);
	drawMinute(minute);
	drawSecond(second);	
	drawDot();
	ctx.restore();
}

draw();
setInterval(draw,1000);