前言
最近在学习HTML5标签，学到Canvas,觉得很有趣。便在慕课网找了个demo练手。就是Canvas时钟。
对于canvas，w3shcool上是这么描述的：
HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
示例
动态可看公告栏状态
正文
1.代码部分
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Time</title>
<style type="text/css">
#clockdiv{
text-align: center;
}
</style>
</head>
<body>
<div id="clockdiv">
<canvas id="dom" width="200" height="200">您的浏览器不兼容canvas</canvas>
<script type="text/javascript" src="Clock.js"></script>
</body>
</html>
js代码
var canvas = document.getElementById('dom');
var context = canvas.getContext('2d');
var height = context.canvas.height;
var width = context.canvas.width;
var r = width / 2;
var rem = width/200;
//时钟背景
function drawBackground() {
context.save();
context.translate(r, r);
context.beginPath();
context.lineWidth = 8*rem;
context.strokeStyle = "#000"
context.arc(0, 0, r - 5*rem, 0, 2 * Math.PI, false);
context.stroke();
context.closePath();
//遍历小时数
var houseNumble = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
houseNumble.forEach(function (number, i) {
context.textAlign = 'center';
context.textBaseline = 'middle'
context.font = 18*rem+'px Arial'
var rad = 2 * Math.PI / 12 * i;
var x = Math.cos(rad) * (r - 30*rem);
var y = Math.sin(rad) * (r - 30*rem);
context.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);
context.beginPath();
if (i % 5 == 0) {
context.fillStyle = "#000"
context.arc(x, y, 2*rem, 0, 2 * Math.PI);
} else {
context.fillStyle = "#ccc"
context.arc(x, y, 2*rem, 0, 2 * Math.PI);
}
context.fill();
context.closePath();
}
}
//定义时针
function drawHour(hour,minute) {
context.save();
context.beginPath();
context.lineWidth = 6*rem;
context.lineCap = 'round'
var rad = 2 * Math.PI / 12 * hour;
var mrad = 2* Math.PI/12/60 * minute;
context.rotate(rad+mrad);
context.moveTo(0, 10*rem);
context.lineTo(0, -r / 2);
context.stroke();
context.restore();
}
//定义分针
function drawMinute(minute) {
context.save();
context.beginPath();
context.lineWidth = 3*rem;
context.lineCap = 'round';
var rad = 2 * Math.PI / 60 * minute;
context.rotate(rad);
context.moveTo(0, 15*rem);
context.lineTo(0, -r + 34)
context.stroke();
context.restore();
}
//定义秒钟
function drawSecond(second) {
context.save();
context.beginPath();
context.lineWidth = 2*rem;
context.lineCap = 'round';
context.fillStyle = "red"
var rad = 2 * Math.PI / 60 * second;
context.rotate(rad);
context.moveTo(-2 ,20);
context.lineTo( 2, 20);
context.lineTo( 1, -r + 18);
context.lineTo( -1, -r + 18);
context.fill();
context.restore();
}
//画中心点
function drawDot() {
context.beginPath();
context.fillStyle = "#fff"
context.arc(0, 0, 4*rem, 0, 2 * Math.PI, false);
context.fill();
}
//时间函数，让时钟根据当前时间跳动
function Draw() {
context.clearRect(0,0,width,height);
var time= new Date();
var hour =time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
drawBackground();
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawDot();
context.restore()
}
Draw();
//刷新时钟
setInterval(Draw,1000);注意事项：1.有可能浏览器不现实效果，原因一：浏览器不兼容，会显示您的浏览器不兼容canvas。原因二：代码出错。
2.<canvas>标签最好不要使用CSS来定义长度大小。
3.js中函数顺序不能乱，否则会被清除而没有效果。
4.代码里高度宽度均为具体px值，画布大小会影响时钟美观（解决方案：设置一个比例变量，其值为 rem=width/200 ,将高度宽度用变量值 rem 来代替）。
2.给博客园公告栏添加时钟样式
1.公告栏先需要申请JS权限。（点击管理—设置—申请JS权限）
2.将自己的JS文件上传到博客的文件（点击管理—文件）里，得到地址，以下是我文件里的地址。（大家可以直接使用）
http://files.cnblogs.com/files/abao0/Clock.js
3.将下面代码贴入博客侧边栏公告。
<div id="clockdiv">
<canvas id="dom" width="200" height="200">您的浏览器不兼容canvas</canvas>
</div>
<script type="text/javascript" src="Clock.js"></script>
4.将下面代码贴入页面定制CSS代码。（加个DIV是为了使时钟在不同博客样式中的公告栏中居中显示）
#clockdiv {
text-align: center;
}
5.自定义你的样式，显示不同风格。
后记
动手做完一个demo会让自己更有收获，赶紧动起手来吧。