前言
最近在学习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文件上传到博客的文件（点击管理—文件）里，得到地址，以下是我文件里的地址。（大家可以直接使用）
https://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会让自己更有收获，赶紧动起手来吧。