canvas画布画时钟(事件跟当前时间一样)

最新推荐文章于 2022-09-23 20:52:30 发布

Cc.＇沐艿伊℡

最新推荐文章于 2022-09-23 20:52:30 发布

阅读量587

点赞数 2

分类专栏： web

本文链接：https://blog.csdn.net/qq_44899153/article/details/93920025

版权

web 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

说明:代码里面的注释打开之后可以画出钟表的1-12时刻(在有背景图片是不需要打开)
效果图
1.关掉注释,有背景图
在这里插入图片描述
2.打开注释,无背景图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        div{
            width: 100%;
            height: 100%;
            position: relative;
        }
        canvas{
              border: 1px solid #ede8e6;
              position: absolute;
              top: 0;
              left: 0;
          }
        img{
            height: 100%;
            position: absolute;
            top: -14px;
            left: 350px;
        }
    </style>
</head>
<body>
<div>
    <!--<img src="clock.jpg" alt="">-->
    <canvas width="1350" height="600"></canvas>
</div>

<script>
    var ctx=document.querySelector("canvas").getContext("2d");
    var w=ctx.canvas.width;
    var h=ctx.canvas.height;
    var radius=200;
    // 圆盘半径
    function drowClock(){
        drowTxt("accomplished by silvia",36,0,"#ede8e6");
        clock(220);
        clock(200);
        // 刻度
        var edgeh=20;
        var edges=15;
        //分/秒针刻度
        for(var i=0;i<60;i++){
            drawscale(edges,Math.PI/30,i,1)
        }
        // 时针刻度
        for(var j=0;j<12;j++){
            drawscale(edgeh,Math.PI/6,j,2);
            // 绘制文字
            ctx.beginPath();
            ctx.font="40px 楷体";
            // 水平对齐
            ctx.textAlign="center";
            // 垂直对齐
            ctx.textBaseline="middle";
            var tw=(radius-30)*Math.cos(Math.PI/6*(j-2));
            var th=(radius-30)*Math.sin(Math.PI/6*(j-2));
            ctx.fillStyle="black";
            ctx.fillText((j+1),w/2+tw,h/2+th);
        }
        //绘制中心圆点
        dot();
        //获取当前时间
        var dt = new Date();
        //给当前指针的角度数赋值
        var index1=dt.getSeconds()+45;//因为0度是从x轴正半轴开始,
        // 为了让时钟十二点时,正对十二点,必须加上45或减去15
        var index2=dt.getMinutes()+45+index1/60;
        var index3=dt.getHours()-3+(index2-45)/60;
        //+(index2-45)/60这部分的作用是让时针转的不突兀,一点一点随着时间转动
        //以下是获取当前日期
        var year = dt.getFullYear();
        var month = dt.getMonth()+1;
        var day = dt.getDate();
        var week = dt.getDay();
        function bu(i) {
            return i < 10 ? "0"+i : i;
        }
        // 将日期显示在钟表中
        drowTxt(year+"-"+bu(month)+"-"+bu(day)+" 星期"+week,15,120,"black");
        //因为时间刻度只有十二个,而一天又二十四小时,需要判断一下
        if(index3>12){
            index3-=12;
        }
        //画指针的位置
        //秒
        pointer(120,140,1,Math.PI/30*index1,Math.PI/48);
        //分
        pointer(100,115,2,Math.PI/30*index2,Math.PI/48);
        // 时
        pointer(80,90,3,Math.PI/6*index3,Math.PI/48);
    }
    //画钟表最外圈的圆的函数
    function clock(radius){
        ctx.beginPath();
        ctx.arc(w / 2, h / 2, radius, 0, Math.PI * 2, true);
        ctx.strokeStyle="green";
        ctx.lineWidth=1;
        ctx.stroke();
    }
    //刻度函数
    function drawscale(edge,angle,a,b){
        ctx.beginPath();
        //刻度开始坐标
        var startw=(radius-edge)*Math.cos(angle*a);
        var starth=(radius-edge)*Math.sin(angle*a);
        //刻度结束坐标
        var endw=(radius+5)*Math.cos(angle*a);
        var endh=(radius+5)*Math.sin(angle*a);
        ctx.beginPath();
        ctx.moveTo(startw+w/2,starth+h/2);
        ctx.lineTo(w/2+endw,h/2+endh);
        ctx.strokeStyle="green";
        ctx.lineWidth=b;
        ctx.stroke();
    }
    //画中心圆点
    function dot(){
        ctx.beginPath();
        ctx.arc(w / 2, h / 2, 10, 0, Math.PI * 2, true);
        ctx.fillStyle="green";
        ctx.fill();
    }
    //指针位置函数
    function pointer(radius1,radius2,b,angle,c){
        var endw1=(radius1+20)*Math.cos(angle);
        var endh1=(radius1+20)*Math.sin(angle);
        var endw2=(radius1+20)*Math.cos((angle-c));
        var endh2=(radius1+20)*Math.sin((angle-c));
        var endw3=(radius2+20)*Math.cos(angle);
        var endh3=(radius2+20)*Math.sin(angle);
        var endw4=(radius1+20)*Math.cos((angle+c));
        var endh4=(radius1+20)*Math.sin((angle+c));
        ctx.beginPath();
        ctx.moveTo(w / 2, h / 2);
        ctx.lineTo(w / 2+endw1, h / 2+endh1);
        ctx.lineTo(w / 2+endw2, h / 2+endh2);
        ctx.lineTo(w / 2+endw3, h / 2+endh3);
        ctx.lineTo(w / 2+endw4, h / 2+endh4);
        ctx.lineTo(w / 2+endw1, h / 2+endh1);
        ctx.strokeStyle="green";
        ctx.lineWidth=b;
        ctx.fillStyle="green";
        ctx.fill();
        ctx.stroke();
    }
    function drowTxt(txt,a,b,c){
        // 绘制文字
    ctx.beginPath();
    ctx.font=a+"px 楷体";
    // 水平对齐
    ctx.textAlign="center";
    // 垂直对齐
    ctx.textBaseline="middle";
    ctx.fillStyle=c;
    ctx.fillText(txt,w/2,h/2+b);
    }
    drowClock();
    //让时钟一秒刷新一次
setInterval(function(){
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    //秒
    drowClock();
},1000)
</script>
</body>
</html>

Cc.＇沐艿伊℡

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
canvas画布画时钟(事件跟当前时间一样)

说明:代码里面的注释打开之后可以画出钟表的1-12时刻(在有背景图片是不需要打开)效果图1.关掉注释,有背景图2.打开注释,无背景图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>...
复制链接

扫一扫