阅读本文需要一点关于canvas基本用法的基础，本文实例为大家分享了HTML5 Canvas实现圆形时钟简易教程

第一步：

canvas.html

在这一步完成后，用浏览器打开canvas.html，你会发现什么都看不到，这是因为我们没有在canvas上绘制任何东西，同时也没有为其定义边界。

在canvas .html中为添加css样式属性：

修改后的draw.js

<div class="jb51code">
<pre class="brush:js;">
function draw() {
var canvas = document.getElementById('clock');
var displayCanvas = document.getElementById('display');
var currentTime = new Date();
var hour = (currentTime.getHours()%12) Math.PI/6;
var minute = currentTime.getMinutes() Math.PI/30;
var second = currentTime.getSeconds() Math.PI/30;
hour = hour - Math.PI (1/2);
minute = minute - Math.PI (1/2);
second = second - Math.PI (1/2);
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var ctxD = displayCanvas.getContext('2d');
showDisplay(ctxD,currentTime);
var s = Math.PI / 1800;
var m = s / 60;
var h = m / 12;
var rotate = requestAnimationFrame(step);
function step(){
second = second + s;
minute = minute + m;
hour = hour + h;
if(second >= Math.PI (3/2)){
second = Math.PI (-1/2);
}
if(minute >= Math.PI (3/2)){
minute = Math.PI (-1/2);
}
if(second >= Math.PI (3/2)){
second = Math.PI (-1/2);
}

ctx.clearRect(0,false);
ctx.stroke();
}

function showDisplay(ctx,date){
var h = date.getHours(),m = date.getMinutes(),s = date.getSeconds();
//计时文字样式
ctx.font = "13px Sans-Serif";
ctx.textAlign = "center";
ctx.strokeText(h+":"+m+":"+s,200);
var timmer = setInterval(function(){
s++;
if(s>=60){
m++;
s=0;
}
if(m>=60){
h++;
m=0;
}
if(h>=24){
h=0;
}
ctx.clearRect(0,400);
ctx.strokeText(h+":"+m+":"+s,200);
},1000);
}