JavaScript Canvas绘制圆形时钟效果
程序员文章站
2022-05-15 11:04:34
本文实例为大家分享了canvas时钟效果展示的具体代码，供大家参考，具体内容如下
...
本文实例为大家分享了canvas时钟效果展示的具体代码，供大家参考，具体内容如下
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
canvas{
display: block;
margin: 0 auto;
background-color: #fdffad;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
document.addeventlistener('domcontentloaded',function(){
var oc=document.queryselector('canvas');
var gd=oc.getcontext('2d');
var r=oc.width/2;
function drawbackground() {
gd.save();
//渐变
var ra = gd.createlineargradient(600, 0, 400, 0);
ra.addcolorstop(1, '#2dd9ff');
ra.addcolorstop(0, '#8c48dd');
//表盘
gd.translate(r, r);
gd.beginpath();
gd.fillstyle = ra;
gd.linewidth = 10;
gd.strokestyle = '#211f4e';
gd.arc(0, 0, r-5, 0, math.pi *2, false);
gd.fill();
gd.stroke();
//数字
for (var i = 1; i < 13; i++) {
var rad=i * math.pi * 2 / 12;
var x = math.sin(rad)*(r-70);
var y= -math.cos(rad)*(r-70);
gd.fillstyle = "red";
gd.font = "bold 80px calibri";
gd.linewidth = 1;
gd.textalign = 'center';
gd.textbaseline = 'middle';
gd.stroketext(i, x, y);
}
//点
for (var i = 0; i < 60; i++) {
gd.beginpath();
var rad=i * math.pi * 2 / 60;
var x = math.sin(rad)*(r-30);
var y= -math.cos(rad)*(r-30);
if (i % 5 == 0) {
gd.fillstyle = 'red';
}
else {
gd.fillstyle = '#ccc'
}
gd.linewidth = 2;
gd.arc(x, y, 6, 0, math.pi * 2, false);
gd.fill();
gd.stroke();
gd.closepath();
}
}
//时针
function drawhour(h,m){
gd.save();
gd.beginpath();
var rad=2*math.pi/12*h;
var mrad=2*math.pi/12/60*m;
gd.rotate(rad+mrad);
gd.linewidth=20;
gd.linecap='round';
gd.moveto(0,10);
gd.lineto(0,-r/3);
gd.stroke();
gd.closepath();
gd.restore();
}
//分针
function drawminutes(m){
gd.save();
gd.beginpath();
var rad=2*math.pi/60*m;
gd.rotate(rad);
gd.linewidth=10;
gd.linecap='round';
gd.moveto(0,10);
gd.lineto(0,-r/2);
gd.stroke();
gd.closepath();
gd.restore();
}
//秒针
function drawseconds(s){
gd.save();
gd.beginpath();
var rad=2*math.pi/60*s;
gd.rotate(rad);
gd.fillstyle='red';
gd.moveto(-2,20);
gd.lineto(2,20);
gd.lineto(1,-r+100);
gd.lineto(-1,-r+100);
gd.fill();
gd.closepath();
gd.restore();
}
//圆点
function drawpoint(){
gd.beginpath();
gd.fillstyle='#fff';
gd.arc(0,0,5,math.pi*2,false);
gd.fill();
}
function drawclock(){
gd.clearrect(0,0,oc.width,oc.height);
var odate=new date();
var h=odate.gethours();
var m=odate.getminutes();
var s=odate.getseconds();
drawbackground();
drawhour(h,m);
drawminutes(m);
drawseconds(s);
drawpoint();
gd.restore();
}
drawclock();
setinterval(drawclock,1000);
},false);
</script>
</head>
<body>
<canvas width="800" height="800"></canvas>
</body>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。