canvas 时钟
canvas听了很久，一直没用上，今天去慕课网上看了一个canvas绘制动态时钟的视频，跟着写了一遍，这个例子应用了许多个canvas的API。
这个例子支持ie9以上：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>canvas 时钟</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
div {
text-align: center;
margin-top: 200px;
}
</style>
</head>
<body>
<div>
<canvas id="clock" height="500px;" width="500px;"></canvas>
</div>
<script>
var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');//getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
var height = ctx.canvas.width;//获取画布的宽
var width = ctx.canvas.height;//获取画布的高
var r = width / 2;//计算画布的半径
function draw() {
ctx.save();//保存当前环境的状态
ctx.translate(r, r);//重新定义画布上的 (0,0) 位置
ctx.beginPath();//起始一条路径，或重置当前路径
ctx.lineWidth = 10;//设置当前的线条宽度
ctx.arc(0, 0, r - 5, 0, 2 * Math.PI, false);//创建弧/曲线（用于创建圆形或部分圆）起始角设置为 0
ctx.stroke();//绘制已定义的路径
var hour = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];//创建小时数组；从起始角开始设置
ctx.font = '24px Arial';//设置文本内容的当前字体属性
ctx.textAlign = 'center';//设置文本内容的当前对齐方式
ctx.textBaseline = 'middle';//设置在绘制文本时使用的当前文本基线
hour.forEach(function (number, i) {//遍历时间
var rad = 2 * Math.PI / 12 * i;//计算每个时间所在的弧度；
var x = Math.cos(rad) * (r - 50);//计算x轴的位子
var y = Math.sin(rad) * (r - 50);//计算y轴的位子
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 - 30);
var y = Math.sin(rad) * (r - 30);
ctx.beginPath();
if (i % 5 === 0) {
ctx.fillStyle = "#000";//设置或返回用于填充绘画的颜色、渐变或模式
ctx.arc(x, y, 2, 2 * Math.PI, false);
}
else {
ctx.fillStyle = "#ccc";
ctx.arc(x, y, 2, 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 = 10;
ctx.lineCap = 'round';//设置或返回线条的结束端点样式
ctx.moveTo(0, 20);//把路径移动到画布中的指定点，不创建线条
ctx.lineTo(0, -r / 2);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
ctx.stroke();
ctx.restore();//返回之前保存过的路径状态和属性
}
function drawMin(minute) {
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 60 * minute;
ctx.rotate(rad);
ctx.lineWidth = 6;
ctx.lineCap = 'round';
ctx.moveTo(0, 20);
ctx.lineTo(0, -r + 80);
ctx.stroke();
ctx.restore();
}
function drawSecond(second) {
ctx.save();
ctx.fillStyle = "#c14543";
ctx.beginPath();
var rad = 2 * Math.PI / 60 * second;
ctx.rotate(rad);
ctx.moveTo(-2, 25);
ctx.lineTo(2, 25);
ctx.lineTo(1, -r + 40);
ctx.lineTo(-1, -r + 40);
ctx.fill();
ctx.restore();
}
function drawDot() {
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(0, 0, 5, 2 * Math.PI, false);
ctx.fill();
}
function drawTime(){
ctx.clearRect(0,0,width,height);//在给定的矩形内清除指定的像素
var now=new Date();
var hour=now.getHours();
var min=now.getMinutes();
var second=now.getSeconds();
draw();
drawSecond(second);
drawMin(min);
drawHour(hour, min);
drawDot();
ctx.restore();
}
drawTime();
setInterval(drawTime,1000);//每一秒重新生成一个画布
</script>
</body>
</html>
