Canvas实战之时钟

最新推荐文章于 2024-08-19 13:51:24 发布

中南滴水哥

最新推荐文章于 2024-08-19 13:51:24 发布

阅读量519

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43742385/article/details/114437880

版权

HTML5 Canvas JavaScript 动态时钟前端开发

关键词由CSDN通过智能技术生成

前端专栏收录该内容

54 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        margin: 100px auto;
        width: 200px;
        background-color: aquamarine;
    }
</style>

<body>
<div class="box">
    <canvas id="clock" width="200px" height="200px">您的浏览器不支持canvas</canvas>
</div>
</body>

</html>
<script>

    const canvas = document.getElementById('clock');
    const context = canvas.getContext('2d');
    const width = context.canvas.width;
    const height = context.canvas.height;

    const radius = width / 2;
    const rem = width / 200;
    const allAngle = 2 * Math.PI;

    function drawCircle() {
        context.save();
        context.translate(radius, radius);
        context.beginPath();
        context.strokeStyle = '#000000';
        context.lineWidth = 10 * rem;
        context.arc(0, 0, radius - context.lineWidth / 2, 0, allAngle, false);
        context.stroke();

        const number = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
        context.font = 18 * rem + 'px Arial';
        context.textAlign = 'center';
        context.textBaseline = 'middle';

        //画数字
        for (let i = 0; i < number.length; i++) {
            let angle = allAngle / 12 * i;
            let x = Math.cos(angle) * (radius - 30 * rem);
            let y = Math.sin(angle) * (radius - 30 * rem);
            context.fillText(number[i], x, y);
        }

        //画刻度
        for (let i = 0; i < 60; i++) {
            let angle = allAngle / 60 * i;
            let x = Math.cos(angle) * (radius - 15 * rem);
            let y = Math.sin(angle) * (radius - 15 * rem);
            context.beginPath();
            if (i % 5 === 0) {
                context.fillStyle = '#000';
                context.arc(x, y, 3 * rem, 0, 2, allAngle, false);
            } else {
                context.fillStyle = '#ccc'
                context.arc(x, y, 2 * rem, 0, 2, allAngle, false);
            }
            context.fill();
        }
        context.restore();
    }

    //画时钟
    function drawHour(hour,minutes)
    {
        context.save();
        context.beginPath();
        context.translate(radius,radius);
        context.lineWidth = 3 * rem;
        context.lineCap = 'round';
        let hourAngle = allAngle / 12 * hour;
        let minuteAngle = allAngle / 60 * minutes / 12;
        let angle = hourAngle + minuteAngle;
        context.rotate(angle);
        context.moveTo(0,10*rem);
        context.lineTo(0,-radius/2.4);
        context.stroke();
        context.restore();
    }
    //画分钟
    function drawMinutes(minutes,seconds){
        context.save();
        context.beginPath();
        context.lineCap = 'round';
        context.strokeStyle = '#000000'
        context.lineWidth = 2 * rem;
        context.translate(radius,radius);
        let angle = allAngle / 60 * minutes + allAngle / 60 * seconds / 60;
        context.rotate(angle);
        context.moveTo(0,10 * rem);
        context.lineTo(0,-radius / 1.8);
        context.stroke();
        context.restore();
    }

    //画秒钟
    function drawSeconds(seconds)
    {
        context.save();
        context.translate(radius,radius);
        let angle = allAngle / 60 * seconds;
        context.rotate(angle);
        context.lineWidth = 1.5 * rem;
        context.strokeStyle = '#000000'
        context.lineCap = 'round';
        context.moveTo(0, 15 * rem);
        context.lineTo(0, -radius / 1.2);
        context.stroke();
        context.restore();
    }

    function drawDot(){
        context.save();
        context.translate(radius,radius);
        context.beginPath();
        context.fillStyle = '#ffffff';
        context.arc(0,0,2*rem,0,allAngle,false);
        context.fill();
        context.restore();
    }

    function drawClock(){
        context.save();
        context.clearRect(0, 0, width, height);
        const date = new Date();
        const hour = date.getHours();
        const  minute = date.getMinutes();
        const  seconds = date.getSeconds();
        drawCircle();
        drawHour(hour,minute);
        drawMinutes(minute,seconds);
        drawSeconds(seconds);
        drawDot();
        context.restore();
    }
    window.onload = function() {
        setInterval(drawClock, 1000);
    }
</script>