用canvas简单画一个时钟

最新推荐文章于 2023-10-26 08:47:56 发布

congboer

最新推荐文章于 2023-10-26 08:47:56 发布

阅读量86

点赞数

分类专栏：识记文章标签： javascript vue.js css html

本文链接：https://blog.csdn.net/congboer/article/details/113531227

版权

识记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<style>
    body {
        text-align: center;
    }
    #canvas {
        background-color: powderblue;
    }

</style>
<body>
    <!--设置画布高和宽 -->
    <canvas id="canvas" height="400px" width="400px"></canvas>
</body>
<script src="./test.js"></script>

let ctx = document.getElementById('canvas').getContext('2d');

function time() {
    // 先清空画布
    ctx.clearRect(0, 0, 400, 400) 

    // 画外圆
    ctx.beginPath();
    ctx.arc(200, 200, 200, 0, 2 * Math.PI);
    ctx.stroke();

    // 画时针刻度
    for(let i = 0; i < 12; i++) {
        ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.save();
        ctx.translate(200, 200);
        ctx.rotate(i / 6 * Math.PI);
        ctx.moveTo(0, -175);
        ctx.lineTo(0, -200);
        ctx.stroke();
        
        ctx.font = 'normal 12px Arial';
        ctx.textAlign = 'center';
        ctx.lineWidth = 1;
        ctx.strokeText(`${i === 0 ? 12 : i === 6 ? 9 : i}`, 0, -160)

        ctx.restore()
    }
    
    // 画分针刻度
    for(let i = 0; i < 60; i++) {
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.save();
        ctx.translate(200, 200);
        ctx.rotate(i / 30 * Math.PI);
        ctx.moveTo(0, -190);
        ctx.lineTo(0, -200);
        ctx.stroke();
        ctx.restore()
    }

    // 获取当前时间
    let nowTime = new Date();
    let hours = nowTime.getHours();
    let minutes = nowTime.getMinutes();
    let seconds = nowTime.getSeconds();

    // 将24小时转化为12小时制
    hours = hours > 12 ? hours - 12 : hours;
    hours = hours + minutes / 60;
    minutes = minutes + seconds / 60;

    // 画时针
    ctx.beginPath();
    ctx.lineWidth = 3;
    ctx.save();
    ctx.translate(200, 200);
    ctx.rotate(hours / 6 * Math.PI);
    ctx.moveTo(0, -80);
    ctx.lineTo(0, 0);
    ctx.stroke();
    ctx.restore();

    // 画分针
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.save();
    ctx.translate(200, 200);
    ctx.rotate(minutes / 30 * Math.PI);
    ctx.moveTo(0, -130);
    ctx.lineTo(0, 0);
    ctx.stroke();
    ctx.restore();

    // 画秒针
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.save();
    ctx.translate(200, 200);
    ctx.rotate(seconds / 30 * Math.PI);
    ctx.moveTo(0, -170);
    ctx.lineTo(0, 0);
    ctx.stroke();
    ctx.restore();

    ctx.beginPath();
    ctx.save();
    ctx.font = 'normal 14px Arial';
    ctx.textAlign = 'center';
    ctx.lineWidth = 1;
    ctx.translate(200, 200);
    ctx.strokeText(`${formatTime(nowTime.getHours())}：${formatTime(nowTime.getMinutes())}：${formatTime(nowTime.getSeconds())}`, 0, 80);
    ctx.restore();

    setInterval(time, 1000);
}

function formatTime(time) {
    return time < 10 ? '0' + time : time;
}

time()

// 将canvas生成图片，添加到body里面
let canvasDom = document.getElementById('canvas')
let imageUrl = canvasDom.toDataURL('image/png')
let image = document.createElement('img')
image.src = imageUrl
document.body.appendChild(image)

congboer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用canvas简单画一个时钟

<style> body { text-align: center; } #canvas { background-color: powderblue; }</style><body>  <canvas id="canvas" height="400px" width="400px"></canvas></body
复制链接

扫一扫

专栏目录