canvas实现时钟效果【2021.10.30】

最新推荐文章于 2023-11-22 16:12:44 发布

轻盈的风

最新推荐文章于 2023-11-22 16:12:44 发布

阅读量83

点赞数

文章标签： javascript html css3

本文链接：https://blog.csdn.net/masierty/article/details/121056541

版权

!
<!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>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        #canvas {
            display: block;
        }

        .clock {
            width: 400px;
            height: 400px;
            background-color: rgb(128, 212, 245);
            border-radius: 20px;
            margin: 300px auto 0;
        }
    </style>
</head>

<body>
    <div class="clock">
        <canvas id="canvas" width="400" height="400">
            您的浏览器不支持canvas，请升级。
        </canvas>
    </div>
</body>
<script>
    /** @type {HTMLCanvasElement} */
    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext('2d');

    //第一步定义基础变量
    let w = h = 400;//时钟宽高
    let x = y = 200;//时钟中心坐标
    let r = 180;//时钟半径
    let r_hour = 60;//时针长度
    let r_minute = 120;//分针长度
    let r_second = 140;//秒针长度
    let r_text = 140;//定义文本宽度
    let r_square = 165;//刻度
    let r_dot = 12;//表盘圆点
    let deg = Math.PI / 180;//定义度


    //第二步封装三个函数
    //画线
    function drawLine(x1, y1, x2, y2, color, width) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.strokeStyle = color || '#000';
        ctx.lineWidth = width;
        ctx.lineCap = 'round';
        ctx.stroke();
        ctx.closePath();
    }
    //画字
    function drawText(text, x, y) {
        ctx.font = "bold 26px 微软雅黑";
        //fillStyle不会因为关闭路径而消失
        ctx.fillStyle = '#000';
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(text, x, y);
    }
    //画圆
    function drawCircular(x, y, r, color) {
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI * 2);
        ctx.fillStyle = color || '#000';
        ctx.fill();
        ctx.closePath();
    }


    //将第三步到第五步封装到一个函数里面
    let colock = function () {
        //第三步画表盘、表心
        drawCircular(x, y, r, '#fff');

        //保存当前canvas状态，改变原点位置
        ctx.save();
        ctx.translate(w / 2, h / 2);
        drawCircular(0, 0, r_dot, '#000');//圆心

        //第四步画数字和刻度
        for (var i = 1; i <= 12; i++) {
            var r_deg = (30 * deg) * i - 90 * deg;//妙极了
            var text_x = r_text * Math.cos(r_deg);
            var text_y = r_text * Math.sin(r_deg);
            drawText(i, text_x, text_y);
        }
        //刻度
        for (var i = 1; i <= 60; i++) {
            var r_deg = (6 * deg) * i - 90 * deg;//妙极了
            var x1 = r * Math.cos(r_deg);
            var y1 = r * Math.sin(r_deg);

            if (i % 5 == 0) {//别傻乎乎的用度来判断
                var x2 = r_square * Math.cos(r_deg);
                var y2 = r_square * Math.sin(r_deg);
                drawLine(x1, y1, x2, y2, '#666', 4);
            } else {
                var x2 = (r_square - 4) * Math.cos(r_deg);
                var y2 = (r_square - 4) * Math.sin(r_deg);
                drawLine(x1, y1, x2, y2, '#999', 2);
            }
        }

        //第五步获取当前时间，并转换为deg
        let date = new Date();
        //   let hour =date.getHours();//[0-23]
        //   let minute = date.getMinutes();//[0-59];
        //   let second = date.getSeconds();//[0-59]
        let hour = date.getHours() * 30 * deg - 90 * deg;//
        let minute = date.getMinutes() * 6 * deg - 90 * deg;//[0-59];
        let second = date.getSeconds() * 6 * deg - 90 * deg;//[0-59]

        drawLine(0, 0, r_hour * Math.cos(hour), r_hour * Math.sin(hour), '#000', 10);
        drawLine(0, 0, r_minute * Math.cos(minute), r_minute * Math.sin(minute), '#000', 5);
        drawLine(0, 0, r_second * Math.cos(second), r_second * Math.sin(second), '#f00', 2);
    }

   colock();//初始化执行一次

    //第六步，计时器
    let shiZhonTimer = setInterval(function(){
        ctx.restore();
        ctx.clearRect(0,0,400,400);
        colock();
    }, 1000);
</script>

</html>

轻盈的风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas实现时钟效果【2021.10.30】

!<!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&gt.
复制链接

扫一扫