javascript&canvas动态时钟绘制

最新推荐文章于 2024-08-27 15:59:21 发布

线程撕裂者+

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量212

点赞数

分类专栏： javascript 文章标签： canvas javascript css

本文链接：https://blog.csdn.net/weixin_46540009/article/details/115423975

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

javascript&canvas自动获取时间的时钟

实现效果如下：
在这里插入图片描述
源码展示

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo of clock</title>
<script>
function time(){
    var mycanvas=document.getElementById("myCanvasTag");
    var mycontext=mycanvas.getContext('2d');
    //清空画布，
    mycontext.clearRect(0,0,600,500)
    //时钟圆圈
    mycontext.beginPath();
    mycontext.arc(200,200,150,0,2*Math.PI);
    mycontext.stroke();
    //设置参数
    var myDate = new Date();
    mycontext.font='10px Arial'
    mycontext.fillText(myDate.toLocaleString(),20,20)
    var h=myDate.getHours();       
    var m=myDate.getMinutes();     
    var s=myDate.getSeconds();
    var deg = Math.PI/180;
    mycontext.beginPath();
    //移动旋转点
     mycontext.translate(200,200)   
    //绘制大刻度
    for(var i=0;i<12;i++){    
        mycontext.lineWidth=2;
        mycontext.rotate(30*deg)        
        mycontext.moveTo(-140,0)
        mycontext.lineTo(-130,0)
        
    }
    mycontext.stroke()
    //绘制小刻度    
    for(var i=0;i<60;i++){    
        mycontext.lineWidth=1;
        mycontext.rotate(6*deg)        
        mycontext.moveTo(-140,0)
        mycontext.lineTo(-135,0)
    }
    mycontext.stroke()    
    
    //绘制时针
    if(h>=12){h-=12}
    mycontext.rotate((30*h+m/2+s/10)*deg)    
    mycontext.lineWidth=3;
    mycontext.moveTo(0,10);
    mycontext.lineTo(0,-100)
    mycontext.stroke()
    //绘制分针
    mycontext.rotate(-(30*h+m/2+s/10)*deg)
    mycontext.rotate((6*m+s/10)*deg)    
    mycontext.lineWidth=2;
    mycontext.moveTo(0,10);
    mycontext.lineTo(0,-110)
    mycontext.stroke()    
    mycontext.rotate(-(6*m+s/10)*deg)

    //绘制秒针
    mycontext.rotate(6*s*deg)    
    mycontext.lineWidth=1;
    mycontext.moveTo(0,-120);
    mycontext.lineTo(0,20)
    mycontext.stroke()
    mycontext.rotate(-6*s*deg)

    //初始化旋转点
    mycontext.translate(-200,-200)

}
    setInterval(time,1000)

</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="500" height="500"></canvas>

</div>
</body>
</html>

线程撕裂者+

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript&canvas动态时钟绘制

javascript自动获取时间的时钟实现效果如下：源码展示<!DOCTYPE html><html><head><title>HTML5 Canvas Demo of clock</title><script>function time(){ var mycanvas=document.getElementById("myCanvasTag"); var mycontext=mycanvas.getC
复制链接

扫一扫

专栏目录