Canvas实战之时钟

<!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>

效果:
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值