使用Canvas画布实现简单的计时器功能

我运气真好！

于 2022-09-25 14:07:54 发布

阅读量384

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44260108/article/details/127037332

版权

使用canvas的画线工具在圆盘中不断的画线，同时需要清除掉上一次的画线，需要对canva的整个画布进行更新；
直接移动和旋转canvas的坐标轴，这样画线的长度就可以固定，且起点和终点的纵坐标始终为0；

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <head title="test" />
</head>
<body>
    <div>
        <canvas id="myCanvas" />
    </div>
     <div id = "showTimes"></div>
</body>
<style>
    html,body{
        padding: 0;
        margin: 0;
    }
    #myCanvas {
    }
    #showTimes{
        background-color: black;
        font-size: 20px;
        color: white;
        width: 300px;
        text-align: center;
    }
</style>
<script>
    let myCanvas = document.getElementById("myCanvas");
    let ctx = myCanvas.getContext('2d');
    myCanvas.width = 400;
    myCanvas.height = 400;
    pi = Math.PI;

    let second = 0;
    let minutes = 0;
    let hours = 0;
    
    function drawDial (){
        ctx.clearRect(0,0,400,400);
        ctx.save();
        //设置新原点 将150，150设置为新的坐标中心
        ctx.translate(150,150);
        //绘制表盘
        for(let i = 0; i < 60; i++){
            ctx.save();
            //从-90度开始，也就是-pi/2 = -90 * pi / 180
            ctx.rotate(-pi/2 + i*pi/30)
            ctx.beginPath()
            ctx.moveTo(148, 0)
            ctx.lineTo(135, 0)
            ctx.strokeStyle = 'blue'
            ctx.lineWidth = i % 5 ? 2 : 4
            ctx.stroke()
            ctx.closePath()
            ctx.restore()
        }
        ctx.restore()
    }
    function calcPointerAngle () {
        //计算新的角度， 秒数 每一个 6 度 6 / 180 = 30
        var sAngle = second*pi/30
        this.drawPinter('black', 125, sAngle, 2)
        second = second < 59 ? second += 1 : 0;
        if(second == 0){
            if(minutes < 59){
                minutes += 1;
            }else{
                minutes = 0;
                hours += 1;
            }
        }
    }
    function drawPinter (color, length, angle, width) {
        ctx.save()
        ctx.translate(150, 150)
        ctx.rotate(-pi/2 + angle)
        ctx.beginPath()
        ctx.moveTo(0,0)
        ctx.lineTo(length, 0)
        ctx.strokeStyle = color
        ctx.lineWidth = width
        ctx.lineCap = 'round'
        ctx.stroke()
        ctx.closePath()
        ctx.restore()
        let recordPlace = document.getElementById('showTimes');
        recordPlace.innerHTML = `${hours >= 10 ? hours: '0'+hours} : ${minutes >= 10 ? minutes: '0'+minutes} : ${ second >= 10 ? second : '0'+second }`;
    }
    setInterval(()=>{
        drawDial ();
        calcPointerAngle ();
    },1000)
</script>

在这里插入图片描述

我运气真好！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Canvas画布实现简单的计时器功能

/从-90度开始，也就是-pi/2 = -90 * pi / 180。//计算新的角度，秒数每一个 6 度 6 / 180 = 30。//设置新原点将150，150设置为新的坐标中心。
复制链接

扫一扫