canvas仿iwatch时钟效果
程序员文章站
2023-11-20 12:20:22
效果图：
图（1）
图（2）
代码如下：
&...
效果图：
图（1）
图（2）
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
*{margin:0; padding:0;}
body{ background:#000; text-align:center;}
canvas{ background:#fff;}
</style>
<script>
function todou(inum){
return inum<10?'0'+inum:''+inum;
}
function d2a(n){
return n*math.pi/180;
}
window.onload = function(){
var oc = document.getelementbyid('c1');
var gd = oc.getcontext('2d');
var cx = oc.width/2,
cy = oc.height/2;
function clock(){
gd.clearrect(0,0,oc.width,oc.height);
var odate = new date();
var h = odate.gethours()%12;
var m = odate.getminutes();
var s = odate.getseconds();
var ms = odate.getmilliseconds();
drawarc(60,0,(h*30+m/60*30),'orange');
drawarc(80,0,(m*6+s/60*6),'purple');
drawarc(100,0,(s*6+ms/1000*6),'aqua');
var str = todou(h)+':'+todou(m)+':'+todou(s);
gd.font = '20px 微软雅黑';
gd.textalign = 'center';
gd.textbaseline = 'middle';
gd.filltext(str,cx,cy);
}
clock()
setinterval(clock,1);
function drawarc(r,s,e,color){
color = color||'black';
gd.beginpath();
gd.arc(cx,cy,r,d2a(s-90),d2a(e-90),false);
gd.strokestyle = color;
gd.linewidth = 20;
gd.stroke();
}
};
</script>
</head>
<body>
<canvas id="c1" width="800" height="600"></canvas>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
上一篇： Nginx+Lua+Redis构建高并发Web应用
下一篇： 一个Vue页面的内存泄露分析详解