H5API-----Canvas画时钟

辉娜

于 2021-09-18 20:01:00 发布

阅读量127

点赞数

分类专栏： h5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/weixin_44211097/article/details/120373143

版权

h5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍如何使用HTML5的Canvas API创建一个实时更新的时钟，展示了一个结合JavaScript和Canvas绘制的动态时钟实例。

摘要由CSDN通过智能技术生成

<!--
 * @Author: 高佳辉
 * @Date: 2021-09-18 14:00:55
 * @LastEditTime: 2021-09-18 19:58:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Briup\H5\9时钟.html
-->
<!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>
        .clock {
            width: 600px;
            height: 600px;
            position: absolute;
            margin-left: -300px;
            left: 50%;
            background-color: rgb(199, 211, 233);
        }
    </style>
</head>

<body>
    <div class="clock">
        <canvas id="myCanvas" width="600px" height="600px">您的浏览器不支持Canvas</canvas>
    </div>
    <script>
        //开启vscode对canvas代码的提示
        /** @type {HTMLCanvasElement}*/
        // 1.获取画布对象
        var myCanvas = document.getElementById('myCanvas');
        var mc = myCanvas.getContext('2d');
        // 获取画布的宽和高
        var width = mc.canvas.width;
        var height = mc.canvas.height;
        //半径
        var r = width / 2;

        // 绘制表盘
        function drawBackground() {
            mc.save();
            mc.translate(r, r); //设置旋转点
            mc.beginPath();
            mc.lineWidth = 10;
            mc.arc(0, 0, r - mc.lineWidth / 2, 0, 2 * Math.PI, false);
            mc.stroke();
            //绘制数字
            var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
            hourNumbers.map(function(number, i) {
                var rad = Math.PI / 6 * i;
                var x = Math.cos(rad) * (r - 40); //这里的数字控制表盘数字和表盘距离
                var y = Math.sin(rad) * (r - 40);
                mc.textAlign = 'center';
                mc.textBaseline = 'middle';
                mc.font = "30px 苹方";
                mc.fillText(number, x, y);
            });
            // 绘制时针刻度
            for (var i = 0; i < 12; i++) {
                mc.beginPath();
                mc.moveTo(280, 0);
                mc.lineTo(300, 0);
                mc.stroke();
                mc.rotate(Math.PI / 6);
            };
            // 绘制分钟刻度
            for (var i = 0; i < 60; i++) {
                mc.beginPath();
                mc.lineWidth = 5;
                mc.moveTo(282, 0);
                mc.lineTo(300, 0);
                mc.stroke();
                mc.rotate(Math.PI / 30);
            };
        }
        //绘制时针
        function drawHour(hour, minute) {
            mc.save();
            mc.beginPath();
            var rad = Math.PI / 6 * hour - 90 * Math.PI / 180;
            var mrad = Math.PI / 360 * minute;
            mc.rotate(rad + mrad);
            mc.lineWidth = 6;
            mc.strokeStyle = 'blue';
            mc.moveTo(-10, 0);
            mc.lineTo(150, 0);
            mc.lineCap = 'round';
            mc.stroke();
            mc.restore();
        }
        // 绘制分针
        function drawMinute(minute) {
            mc.save();
            mc.beginPath();
            var rad = Math.PI / 30 * minute - 90 * Math.PI / 180;
            mc.rotate(rad);
            mc.lineWidth = 5;
            mc.strokeStyle = 'green';
            mc.moveTo(-10, 0);
            mc.lineTo(200, 0);
            mc.lineCap = 'round';
            mc.stroke();
            mc.restore();
        }
        // 绘制秒针
        function drawSecond(second) {
            mc.save()
            var rad = Math.PI / 30 * second - 90 * Math.PI / 180;
            mc.lineWidth = 4;
            mc.strokeStyle = 'red';
            mc.beginPath();
            mc.rotate(rad);
            mc.moveTo(-20, 0);
            mc.lineTo(240, 0);
            mc.lineCap = 'round';
            mc.stroke();
            mc.restore();
        }
        // 绘制中间原点
        function drawDot() {
            mc.beginPath();
            mc.arc(0, 0, 8, 0, Math.PI * 2, true);
            mc.fillStyle = 'yellow';
            mc.fill();
            mc.restore();
        }


        // 主函数
        function draw() {
            mc.clearRect(0, 0, width, height); //清楚画布

            var now = new Date();
            var hour = now.getHours();
            console.log(hour);
            hour = hour > 12 ? hour - 12 : hour;
            console.log(hour);
            var minute = now.getMinutes();
            var second = now.getSeconds();
            drawBackground();
            drawHour(hour, minute);
            drawMinute(minute);
            drawSecond(second);
            drawDot();
            mc.restore();
        }
        setInterval(draw, 1000); //设置定时器
    </script>
</body>

</html>

运行结果：

辉娜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5API-----Canvas画时钟

<!DOCTYPE html><html lang="en">.
复制链接

扫一扫

专栏目录