使用canvas绘制时钟

最新推荐文章于 2022-05-11 19:24:55 发布
最新推荐文章于 2022-05-11 19:24:55 发布
阅读量337 收藏 3
点赞数
分类专栏： 日志 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38944959/article/details/88386066
版权

理论基础：
掌握canvas绘制圆形，以及绘制扇形的弧度计算（涉及三角函数），掌握canvas的动画基础和绘制图片》了解更多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="500" height="500" style="border: 1px solid #ccc"></canvas>

<script>
    var ctx = document.querySelector("canvas").getContext("2d");

    var checkNum = function (num) {
        return num >= 10 ? num : "0" + num;
    }

    function clock() {
        //绘制背景图
        var img = new Image();
        img.onload = function () {
            ctx.drawImage(img, 0, 0, 255, 255, 10, 10, 480, 480);

            //当图片加载完后执行
            //获取时分秒
            var dt = new Date();
            var h = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();

            var timeTxt = checkNum(h) + ":" + checkNum(m) + ":" + checkNum(s);
            //绘制文字
            ctx.beginPath();
            ctx.font = "20px 微软雅黑";
            ctx.textAlign = "center";
            ctx.fillStyle = "orange";
            ctx.fillText(timeTxt, 250, 410);

            //精确时分
            h = h > 12 ? (h - 12) : h;
            h += m / 60;
            m += s / 60;

            ctx.beginPath();
            ctx.arc(250, 250, 200, 0, Math.PI * 2);
            ctx.strokeStyle = "orange";
            ctx.lineWidth = 5;
            // ctx.fillStyle = "rgb(60,253,126)";
            // ctx.fill();
            ctx.stroke();
            ctx.clip();//裁剪

            //绘制圆心
            ctx.beginPath();
            ctx.arc(250, 250, 8, 0, Math.PI * 2);
            ctx.fillStyle = "orange";
            ctx.fill();

            //时刻度
            for (var i = 0; i < 12; i++) {
                //保存当前的状态
                ctx.save();
                ctx.beginPath();
                ctx.translate(250, 250);
                ctx.rotate(i * 30 * Math.PI / 180);
                ctx.moveTo(0, -180);
                ctx.lineTo(0, -200);
                ctx.lineCap = "round";
                ctx.strokeWidth = 7;
                ctx.strokeStyle = "orange";
                ctx.stroke();
                ctx.restore();//恢复当前状态
            }
            //分刻度
            for (var i = 0; i < 60; i++) {
                //保存当前的状态
                ctx.save();
                ctx.beginPath();
                ctx.translate(250, 250);
                ctx.rotate(i * 6 * Math.PI / 180);
                ctx.moveTo(0, -190);
                ctx.lineTo(0, -200);
                ctx.lineCap = "round";
                ctx.strokeWidth = 7;
                ctx.strokeStyle = "orange";
                ctx.stroke();
                ctx.restore();//恢复当前状态
            }
            //时针
            //保存当前的状态
            ctx.save();
            ctx.beginPath();
            ctx.translate(250, 250);
            ctx.rotate(h * 30 * Math.PI / 180);
            ctx.moveTo(0, 0);
            ctx.lineTo(0, -100);
            ctx.lineCap = "round";
            ctx.strokeWidth = 7;
            ctx.strokeStyle = "orange";
            ctx.stroke();
            ctx.restore();//恢复当前状态

            //分针
            // 保存当前的状态
            ctx.save();
            ctx.beginPath();
            ctx.translate(250, 250);
            ctx.rotate(m * 6 * Math.PI / 180);
            ctx.moveTo(0, 0);
            ctx.lineTo(0, -140);
            ctx.lineCap = "round";
            ctx.strokeWidth = 4;
            ctx.strokeStyle = "orange";
            ctx.stroke();
            ctx.restore();//恢复当前状态

            //秒针
            //保存当前的状态
            ctx.save();
            ctx.beginPath();
            ctx.translate(250, 250);
            ctx.rotate(s * 6 * Math.PI / 180);
            //秒针上的圆
            ctx.arc(0, -120, 5, 0, Math.PI * 2);
            ctx.fillStyle = "green";
            ctx.fill();
            ctx.moveTo(0, 0);
            ctx.lineTo(0, -160);
            ctx.lineCap = "round";
            ctx.strokeWidth = 2;
            ctx.strokeStyle = "orange";
            ctx.stroke();
            ctx.restore();//恢复当前状态

        }
        img.src = "1.jpg";
    }
    setInterval(clock, 1000);
    clock();
</script>
</body>
</html>

最终效果图
在这里插入图片描述

一只前端小白
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 Canvas绘制时钟
06-01
NULL 博文链接：https://wenhai.iteye.com/blog/2158714
用canvas绘制时钟
ancha7106的博客
07-21 194
用canvas做时钟其实很简单，下面是我做出的效果： 是不是还挺漂亮的？ 下面上代码： html <div class="whole"> <canvas id="canvas" width="450" height="450"></canvas> <canvas id="canvas1" width="3...
Canvas之绘制时钟
summer爱前端
08-18 1309
用canvas画一个时钟玩玩吧，比css+js简单太多了……
使用canvas简单绘制时钟
weixin_49411859的博客
07-18 190
html部分： <canvas id="canvas" width="800" height="600"></canvas> js部分： class Clock { constructor(){ this.canvas = document.getElementById('canvas'); this.ctx = this.canvas.getContext('2d'); } init(){
Canvas绘制一个时钟
秃头小桂子
05-11 2182
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
使用canvas绘制超炫时钟
09-28
主要介绍了使用canvas绘制超炫时钟的方法及代码，非常的漂亮，这里推荐给大家
JavaScript Canvas绘制时钟
最新发布
02-22
JavaScript Canvas绘制时钟
使用Canvas绘制风景时钟
07-06
使用 Canvas 以及日期对象等知识制作风景时钟效果
canvas绘制表盘时钟
08-31
本文主要分享了canvas绘制表盘时钟的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
JS+Canvas绘制时钟效果
10-22
主要为大家详细介绍了基于javascript下使用canvas绘制时钟的具体实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
canvas画时钟
pumpkin_truck的博客
06-04 2463
canvas画时钟 今天我们来学习学习如何使用canvas画时钟 首先我们得了解一下canvas是什么，怎么使用它： Canvas 中文名称叫“画布”，通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。 它最大得特点就是绘制它需要使用脚本绘制。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 首先在html5中添加canvas元素，规定元素的id ，width,和height，这次的高度和宽度我习惯用js书写。 <canvas id="canvas"&
canvas入门--绘制时钟
Crazykun的博客
02-09 671
canvas入门--绘制时钟
使用canvas绘制一个时钟
西伯利亚小灰灰狼的博客
11-01 746
项目分为两个文件，clock.html和clock.js，下面贴出两个源代码 clock.html          Clock              div{             text-align: center;             margin-top: 250px;         }         #clock{           
绘制时钟
09-12 133
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas绘制时钟Demo</title> <style&gt...
canvas绘制时钟
qq_40710974的博客
09-29 950
大部分的内容都是参考这里的,但是我做了改动并且讲的会更细一点 https://mp.weixin.qq.com/s/qhPg2TjjcFh9l5ZLUsFPSg
用canvas绘制一个简易时钟
u011927449的博客
04-18 295
　　在见识了html5中canvas的强大，笔者准备制作一个简易时钟。 　　下面就是成果啦，制作之前我们先分析一下，绘制一个时钟需要做哪些准备。 一 、 1.首先这个时钟分为表盘，指针（时针，分针，秒针）和数字三部分。 2.表盘是个圆，这个简单。 3.绘制指针时，需要先获取到系统时间，然后找到时间和角度的关系。 4.然后利用画圆函数，把起始和终点设为同一角度，即可画出以圆心为起点的射线（指针...
实现HTML5 Canvas绘制时钟
06-01
好的，下面是一个简单的HTML5 Canvas绘制时钟的示例代码： ``` <!DOCTYPE html> <title>Canvas时钟 canvas { border: 2px solid black; } <canvas id="clock" width="200" height="200"></canvas> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值