首页 > 代码库 > canvas 时钟
canvas 时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<style>
*{
padding:0;
margin:0;
}
html,body{
width:100%;
height:100%;
overflow: hidden;
background: #000;
}
canvas{
background:#fff;
}
span{
font-size: 50px;
}
</style>
<script>
function d2a(n){
n-=90;
return n*Math.PI/180;
}
window.onload=function(){
var c=document.getElementsByTagName(‘canvas‘)[0];
var str=‘时钟‘;
//准备画笔
var gd=c.getContext(‘2d‘);
gd.lineWidth=20;
function drawArc(start,end,r,color){
gd.beginPath();
gd.strokeStyle=color;
gd.arc(200,200,r,d2a(start),d2a(end),false);
gd.stroke();
}
function clock(){
gd.clearRect(0,0,c.width,c.height)
var oDate=new Date();
var h=oDate.getHours();
var m=oDate.getMinutes();
var s=oDate.getSeconds();
var ms=oDate.getMilliseconds();
//秒
drawArc(0,s*6+ms/1000*6,100,‘red‘);
//分
drawArc(0,m*6,80,‘blue‘);
//时
drawArc(0,h%12*30,60,‘green‘);
//画字
gd.font=‘50px a‘;
gd.textAlign=‘center‘;
gd.textBaseline=‘bottom‘;
gd.fillText(str,200,90);
gd.font=‘20px a‘;
gd.fillText(h+‘:‘+m+‘:‘+s,200,200);
}
setInterval(clock,16)
clock();
};
</script>
</head>
<body>
<canvas width="800" height="600">
<span>浏览器不支持canvas</span>
</canvas>
</body>
</html>
canvas 时钟