canvas实现简单时钟

已于 2023-05-21 19:26:33 修改
阅读量258 收藏 1
点赞数 3
分类专栏： HTML 文章标签： javascript vue.js 前端
于 2022-05-28 22:58:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/paopao_pop/article/details/125024753
版权

最近有canvas的业务需求，就学习了一下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>

<body>
    <canvas id="canvas1" width="800" height="600">
        你的浏览器不支持canvas
    </canvas>

    <script>
        let Can = document.querySelector('#canvas1');
        // console.log(Can);
        let ctx = Can.getContext('2d');
        // console.log(ctx);



        function renderClock() {
            // 每次清除画布
            ctx.clearRect(0, 0, 800, 600);


            // 保留初始的状态
            ctx.save();

            // 将坐标移到画布中心
            ctx.translate(400, 300);
            //画小时数
            const hourArray = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];

            const MPI = Math.PI;

            hourArray.forEach(function (num, i) {
                let rad = 2 * MPI / 12 * i;
                let x = Math.cos(rad) * 160;
                let y = Math.sin(rad) * 160;
                ctx.font = "18px sans-serif";
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                ctx.fill();
                ctx.fillText(num, x, y);

            });


            let time = new Date();
            // 如果时间大于12就是下午减去12
            let hour = time.getHours() > 12 ? time.getHours() - 12 : time.getHours();
            let min = time.getMinutes();
            let sec = time.getSeconds();

            ctx.font = "18px sans-serif";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillStyle = '#FF0000';
            ctx.fill();
            ctx.fillText(`${hour < 10 ? 0 : ''}${hour}:${min < 10 ? 0 : ''}${min}:${sec < 10 ? 0 : ''}${sec}`, 0, 100);
            console.log(`${hour < 10 ? 0 : ''}${hour}:${min < 10 ? 0 : ''}${min}:${sec < 10 ? 0 : ''}${sec}`);
            ctx.rect(-40, 85, 80, 30);
            ctx.strokeStyle = "#FF0000";
            ctx.stroke();


            ctx.rotate(-2 * MPI / 4);
            ctx.save();


            // 绘制表盘
            ctx.beginPath();
            ctx.arc(0, 0, 200, 0, 2 * MPI);
            ctx.strokeStyle = '#999';
            ctx.lineWidth = 5;
            ctx.stroke();
            ctx.closePath();


            // 绘制时钟刻度
            for (let i = 0; i < 12; i++) {
                ctx.beginPath();
                ctx.rotate(MPI / 6);
                ctx.moveTo(185, 0);
                ctx.lineTo(200, 0);
                ctx.strokeStyle = '#999';
                ctx.lineWidth = 10;
                // ctx.fillText(`${i + 1}`, 160, 5);
                ctx.stroke();
                ctx.closePath();

            };

            ctx.restore();
            ctx.save();

            // 绘制秒针刻度
            for (let j = 0; j < 60; j++) {
                ctx.beginPath();
                ctx.rotate(MPI / 30);
                ctx.moveTo(190, 0);
                ctx.lineTo(200, 0);
                ctx.strokeStyle = '#999';
                ctx.lineWidth = 2;
                ctx.stroke()
                ctx.closePath();

            }
            ctx.restore();
            ctx.save();




            // 绘制秒针
            ctx.beginPath();
            // 根据秒针的时间旋转
            ctx.rotate(2 * MPI / 60 * sec)
            ctx.moveTo(-30, 0);
            ctx.lineTo(170, 0);
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 2;
            ctx.stroke();
            ctx.closePath();

            ctx.restore();
            ctx.save();



            // 绘制分针
            ctx.beginPath();
            // 根据分针的时间旋转
            ctx.rotate(2 * MPI / 60 * min + 2 * MPI / 3600 * sec)
            ctx.moveTo(-10, 0);
            ctx.lineTo(150, 0);
            ctx.strokeStyle = '#999';
            ctx.lineWidth = 3;
            ctx.stroke();
            ctx.closePath();

            ctx.restore();
            ctx.save();




            // 绘制时针
            ctx.beginPath();
            // 根据时针的时间旋转
            ctx.rotate(2 * MPI / 12 * hour + 2 * MPI / 60 / 12 * min + 2 * MPI / 12 / 60 / 60 * sec)
            ctx.moveTo(-10, 0);
            ctx.lineTo(100, 0);
            ctx.strokeStyle = '#999';
            ctx.lineWidth = 3;
            ctx.stroke();
            ctx.closePath();

            ctx.restore();
            ctx.save();




            // h绘制中心点
            ctx.beginPath();
            ctx.arc(0, 0, 8, 0, 2 * MPI);
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.closePath();



            // 回退初始状态
            ctx.restore();
            ctx.restore();

        }


        setInterval(function () {
            renderClock();
        }, 1000);


    </script>
</body>

</html>

效果如下，可以复制粘贴代码直接运行

 一个前端小白的日常

Alan Lu Pop
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript canvas实现简易时钟例子
10-14
综上所述，这个JavaScript Canvas实现的简易时钟例子，通过Canvas API的基本绘图功能，结合JavaScript的时间处理，成功地创建了一个实时更新的钟表。它展示了Canvas在动态图形和交互式界面设计中的强大潜力。对于想...
canvas实现时钟
m0_56274171的博客
07-07 708
canvas实现时钟
javascript通过canvas实现不同时区的时钟绘制
觉醒法师的专栏
04-17 1283
这里使用Javascript的class和canvas技术实现时钟的绘制，并且通过类实例来实现不同时区的时间显示，增强复用性。
【前端html/js】使用canvas实现实时时钟
飛之宇
01-08 652
【前端html/js】使用canvas实现实时时钟及贴图版
Canvas绘制一个时钟
秃头小桂子
05-11 2232
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
canvas之时钟
时光清浅处，一步一安然
07-01 275
在画时钟之前，我们先来聊一聊canvas动画。 驱动动画的方法有以下三种：那么我们制作canvas动画使用哪种更好呢？所以在制作canvas动画时，更推荐使用。制作canvas动画的步骤：那么就让我们看看时钟的动画制作吧： 效果如下：
js Canvas实现圆形时钟教程
10-21
主要为大家详细介绍了HTML5 Canvas实现圆形时钟简易教程,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript结合Canvas 实现简易的圆形时钟
10-24
本文给大家分享的是javascript结合Canvas 实现简易的圆形时钟，主要是对自己前段时间学习html5的canvas的一次小检验，这里推荐给小伙伴们，有需要的可以参考下。
常用业务js组件：canvas绘图、时间戳转换、正则验证、深拷贝等
mosowe
03-03 976
先推荐一个npm包【mosowejs】，对没错，用我的专用名称命名的js，点击可以查看示例，手机，PC均可，内部包含了N多日常开发用到的： 正则验证（手机号，座机号，中英文，数字，url等等）， 常用的一些方法（时间格式化-年月日时分秒季度周数天数，数字千分位，数据脱敏，数据千分位，复制等等等）， 一些数据类型判断（移动端PC判断、object，number，string…） 常用canvas绘图（海报图，裁剪类的有涂抹裁剪，多边形裁剪）基于document开发，同类的跨端插件uniapp点此 支持NP
Canvas实现简单时钟表盘
qq_31808873的博客
05-15 521
Canvas绘制表盘
＜canvas＞利用Canvas绘制简易版挂钟
m0_48465196的博客
02-22 658
使用Canvas绘制一个挂钟
canvas绘制时钟
qq_41985405的博客
06-07 187
canvas绘制时钟 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content='width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'></meta> </head&g
用canvas制作一个时钟
jspyth的博客
10-20 2791
我想熟悉一下canvas的使用，参考一个例子做了一个能动态展示当前时刻的canvas时钟。 先看效果： 实现思路： 使用canvas绘图第一步肯定是先获取canvas元素对象，并定义上下文。 var clock = document.getElementById("clock"); clock.style.backgroundColor = "black"; var graph = n...
canvas画时钟
pumpkin_truck的博客
06-04 2504
canvas画时钟 今天我们来学习学习如何使用canvas画时钟 首先我们得了解一下canvas是什么，怎么使用它： Canvas 中文名称叫“画布”，通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。 它最大得特点就是绘制它需要使用脚本绘制。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 首先在html5中添加canvas元素，规定元素的id ，width,和height，这次的高度和宽度我习惯用js书写。 <canvas id="canvas"&
微信小程序开发之——时钟-Canvas介绍(1)
我的博客
09-30 1182
一 概述 Canvas画布属性介绍 Canvas用法示例(新/旧) 二 Canvas画布属性介绍 属性 类型 说明 type string 指定 canvas 类型，支持 2d (2.9.0) 和 webgl (2.7.0) canvas-id string canvas 组件的唯一标识符，若指定了 type 则无需再指定该属性 disable-scroll boolean 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 bindtouchstar
canvas常用方法，canvas绘制时钟案例
最新发布
study_way的博客
10-26 348
在路径对象上，使用不同的绘图命令来定义路径的形状。
使用canvas绘制时钟
NanChen的博客
09-09 460
是的，beginPath()是重新开始新路径，而把之前的路径都清空掉。arc方法是2D画布的一个绘制圆状态的一个方法，arc有六个参数：arc(x, y, r, sAngle, eAngle, counterclockwise);stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。使用clip()函数将该区域（由rect()、arc()方法指定的绘图区域）设定为裁选区。使用Canvas的绘制函数比如，rect()、arc()之类的方法选择好绘图区域。
实现HTML5 Canvas绘制时钟
06-01
好的，下面是一个简单的HTML5 Canvas绘制时钟的示例代码： ``` <!DOCTYPE html> <title>Canvas时钟 canvas { border: 2px solid black; } <canvas id="clock" width="200" height="200"></canvas> ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值