h5之canvas画时钟

最新推荐文章于 2023-07-26 16:00:48 发布
最新推荐文章于 2023-07-26 16:00:48 发布
阅读量687 收藏 3
点赞数
分类专栏： h5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HZKang/article/details/79360485
版权

近来学了一些canvas的基础操作，例如画线段、矩形、圆、字体、添加图片、渐变等等操作，便利用画布画了个时钟来练习一下，代码以及图片如下：
时钟图：
这里写图片描述

代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #cvs{
            display: block;
            margin: 0 auto;
            border-radius: 30px;
            background: #6F917D;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="800" height="600"></canvas>
    <script>
        function clock () {
            var cvs = document.getElementById('cvs');
            var ctx = cvs.getContext('2d');

            // 清除画布内容
            ctx.clearRect(0,0,800,600);

            // 获取时间
            var dates = new Date();
            var h = dates.getHours();
            var min = dates.getMinutes();
            var sec = dates.getSeconds();
            var times = h + '：' + min;
            h += min/60;
            min += sec/60;

            //设置表盘，渐变方法的参数1,2雨4,5分别为两个圆的圆心，参数3,6分别为两个圆的半径
            var g1 = ctx.createRadialGradient(400, 300, 0, 400, 300, 150);
            //设置两个渐变色的参数
            g1.addColorStop(0, "#fcfcfc");
            g1.addColorStop(1, "#808080");

            // 画表盘和表心两圆
            ctx.beginPath();
            ctx.lineWidth = 8;
            ctx.arc(400,300,150,0,2*Math.PI,true);
            ctx.strokeStyle = 'black';
            ctx.stroke();
            ctx.closePath();
            ctx.fillStyle = g1;
            ctx.fill();

            ctx.beginPath();
            ctx.lineWidth = 1;
            ctx.arc(400,300,10,0,2*Math.PI,true);
            ctx.closePath();
            ctx.fillStyle = 'yellow';
            ctx.fill();


            // 表盘分钟刻度线
            for (var i=0; i<60; i++) {
                ctx.save(); // 保存状态
                ctx.translate(400, 300);
                ctx.rotate(Math.PI/30 * i);
                ctx.beginPath();
                ctx.fillStyle = 'red';
                ctx.fillRect(0, -150, 2, 10);
                ctx.closePath();
                ctx.restore(); // 恢复原始状态
            }

            // 表盘时钟刻度线
            for (var i = 0; i<12; i++) {
                ctx.save();
                ctx.translate(400, 300);
                ctx.rotate(Math.PI/6 * i);
                ctx.beginPath();
                ctx.fillStyle = 'black';
                ctx.fillRect(0, -150, 2, 15);
                ctx.closePath();
                ctx.restore();
            }

            // 表盘时针
            ctx.save();
            ctx.translate(400, 300);
            ctx.rotate(Math.PI/6 * h);
            ctx.beginPath();
            ctx.moveTo(0, -100);
            ctx.lineTo(-8, -20);
            ctx.lineTo(0, 0);
            ctx.lineTo(8, -20);
            ctx.lineTo(0, -100);
            ctx.closePath();
            ctx.fillStyle = '#000';
            ctx.fill();
            ctx.restore();

            // 表盘分针
            ctx.save();
            ctx.translate(400, 300);
            ctx.rotate(Math.PI/30 * min);
            ctx.beginPath();
            ctx.moveTo(0, -120);
            ctx.lineTo(-8, -20);
            ctx.lineTo(0, 0);
            ctx.lineTo(8, -20);
            ctx.lineTo(0, -120);
            ctx.closePath();
            ctx.fillStyle = 'blue';
            ctx.fill();
            ctx.restore();

            // 表盘秒针
            ctx.save();
            ctx.translate(400, 300);
            ctx.rotate(Math.PI/30 * sec);
            ctx.beginPath();
            ctx.moveTo(0, -150);
            ctx.lineTo(-8, -20);
            ctx.lineTo(0, 0);
            ctx.lineTo(8, -20);
            ctx.lineTo(0, -150);
            ctx.closePath();
            ctx.fillStyle = 'yellow';
            ctx.fill();
            ctx.restore();

            // 数字时间
            ctx.save();
            ctx.fillStyle = '#000';
            ctx.font = 'bold 20px 微软雅黑';
            ctx.translate(400, 300);
            ctx.beginPath();
            ctx.fillText(times, -38, 50, 200);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }
        clock();
        setInterval(clock, 1000); // 每秒钟刷新一次
    </script>
</body>
</html>
斜斟星雨
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5的canvas画时钟
10-20
用HTML5的canvas画时钟，怎么使用画布在浏览器上面绘画。画出一个漂亮的时钟。里面用到三角函数以及一些canvas的方法。
canvas绘制时钟
qq_40710974的博客
09-29 947
大部分的内容都是参考这里的,但是我做了改动并且讲的会更细一点 https://mp.weixin.qq.com/s/qhPg2TjjcFh9l5ZLUsFPSg
Canvas绘制一个时钟
秃头小桂子
05-11 2173
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
canvas画时钟
pumpkin_truck的博客
06-04 2455
canvas画时钟 今天我们来学习学习如何使用canvas画时钟 首先我们得了解一下canvas是什么，怎么使用它： Canvas 中文名称叫“画布”，通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。 它最大得特点就是绘制它需要使用脚本绘制。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 首先在html5中添加canvas元素，规定元素的id ，width,和height，这次的高度和宽度我习惯用js书写。 <canvas id="canvas"&
如何使用h5元素“Canvas”来绘制一个简易的网页时钟（附代码）
weixin_75115821的博客
07-26 610
Canvas是HTML5中的一个元素，用于通过JavaScript和HTML绘制图形、动画和交互式内容。它可以在浏览器中创建和操作位图图像，使开发者可以在网页上实现高度个性化的视觉效果和交互体验。通过Canvas，开发者可以使用JavaScript来绘制图形、文本和图像。可以动态地更新画布上的内容，实现动画效果或响应用户的交互操作。Canvas提供了一组丰富的绘图函数和方法，使开发者可以在画布上绘制直线、矩形、圆形、路径等形状，并可以使用各种样式、颜色和渐变来装饰绘制的图形。
Canvas实现简单时钟表盘
qq_31808873的博客
05-15 459
Canvas绘制表盘
h5，canvas实现时钟.zip
03-20
html5，canvas实现旋转时钟效果，炫酷彩色（可以自己设置），颜色动态变化，可以自行设置,canvas实现
JS+H5 Canvas实现时钟效果
10-18
主要为大家详细介绍了JS+H5 Canvas实现时钟效果，利用JavaScript和Canvas实现简单时钟效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
h5用canvas实现漂亮的时钟效果
11-06
h5用canvas实现漂亮的时钟效果 h5用canvas实现漂亮的时钟效果
基于h5 canvas的模拟时钟javascript程序.zip
06-21
1、构造方法第一个参数支持传入canvas dom对象的id，既可以传canvas dom对象也可以传此dom对象的id。 2、增加setOptions方法，方便动态更新模拟时钟的属性。 3、修复传入options没有验证属性值的BUG，若传入的...
手绘时钟HTML，很简单的
12-18
HTML5的手绘时钟，再加两张图片就可以了，没技术含量，很简单的一个东西
h5实现时钟效果
11-24
h5的canvas实现的时钟效果
＜canvas＞利用Canvas绘制简易版挂钟
m0_48465196的博客
02-22 595
使用Canvas绘制一个挂钟
Html5代码实现动态时钟
DICA的SEOer专栏
04-07 4479
该示例使用了HTML5，CSS和JavaScript来创建一个简单的动态时钟。CSS样式用于设置页面的背景颜色，文本颜色，字体大小，字体样式和文本对齐方式。JavaScript代码用于获取当前时间，并将其格式化为HH：MM：SS字符串，然后将其显示在页面上的一个DIV元素中。setInterval函数用于每秒钟调用一次updateTime函数，以便时钟可以动态更新。 该示例使用了HTML5的canvas元素和JavaScript来创建一个动态时钟表盘。
H5制作时钟
Hermia_yuan的博客
04-17 690
<!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>Do.
利用H5的canvas画一个时钟
m0_57923701的博客
12-25 948
用canvas画一个钟表
Canvas之绘制时钟
summer爱前端
08-18 1306
用canvas画一个时钟玩玩吧，比css+js简单太多了……
使用h5的方式来实现钟表
m0_71933813的博客
08-27 263
使用h5的方式来实现钟表
2014年311教育学专业基础综合答案解析.pdf
最新发布
04-24
教育学考研，考研真题，全国硕士研究生统一考试教育学专业基础综合真题及解析，311历年真题，参考答案，答案解析。教育学统考。
h5 canvas t恤
05-15
制作H5 canvas T恤通常需要设计师和开发人员共同配合完成。设计师首先需要设计好T恤的样式和图案，并将图案转换成canvas图像格式。开发人员则需要将canvas图像嵌入到T恤的HTML代码中，并添加相应的JavaScript代码，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值