前面幾節(jié)的鏈接：http://www.lxweimin.com/u/ab8f021be9ee
畫一個不一樣的時鐘，后面想著畫一個正常的時鐘，有圖有代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:0;}
html,body{
height: 100%;
overflow: hidden;
}
body{
background: #000;
}
#c1{
background: #fff;
}
</style>
<script>
function d2a(n){
return n*Math.PI/180;
}
document.addEventListener('DOMContentLoaded',function(){
var oC = document.getElementById('c1');
var gd = oC.getContext('2d');
var cx = 200;
var cy = 200;
setInterval(function(){
gd.clearRect(0,0,oC.width,oC.height);
gd.font = '30px 微軟雅黑';
gd.fillText('弧形時鐘',150,380);
var oDate = new Date();
var h = oDate.getHours();
var m = oDate.getMinutes();
var sec = oDate.getSeconds();
var ms = oDate.getMilliseconds();
drawArc(0,h%12*30+m/60*30,80,'green');
drawArc(0,m*6+sec/60*6,60,'blue');
drawArc(0,sec*6+ms/1000*6,100,'red');
//文字（后面幾節(jié)詳細講解）
gd.beginPath();
gd.font = '16px 宋體';
var oDate = new Date();
var h = oDate.getHours();
var m = oDate.getMinutes();
var s = oDate.getSeconds();
gd.fillText(h +":"+ m + ":" + s,170,200);
},16);
//畫弧封裝
function drawArc(start,end,r,color){
gd.beginPath();
color = color||'#000';
gd.strokeStyle = color;
gd.lineWidth = 20;
start-=90;
end-=90;
gd.arc(cx,cy,r,d2a(start),d2a(end),false);
gd.stroke();
}
},false);
</script>
</head>
<body>
<canvas id="c1" width="800" height="600"></canvas>
</body>
</html>
效果圖：
Paste_Image.png
