前面几节的链接：http://www.jianshu.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');
//文字（后面几节详细讲解）
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
网友评论