花里胡哨的canvas时钟

最新推荐文章于 2024-07-23 16:10:02 发布
最新推荐文章于 2024-07-23 16:10:02 发布
阅读量106 收藏
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46073353/article/details/116947607
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas width="500" height="500" style="background-color: black;"></canvas>
    <script>
        var canvas = document.querySelector('canvas');
        var context = canvas.getContext("2d");
        //创建canvas画布，创建2d画笔
        function s() {
            var time = new Date();
            var hour = time.getHours() > 12 ? time.getHours() - 12 : time.getHours();
            //获取当前时间，小时，分钟，秒钟，毫秒；并对获取的小时进行处理，将其二十四转换为12小时制
            var minute = time.getMinutes();
            var second = time.getSeconds();
            var seconds = time.getMilliseconds();
            var r = Math.floor(Math.random()*256);
            //随机获取红色、蓝色、绿色及透明度
            var b = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var a = Math.random();
            var x = seconds * Math.PI / 180/1000 * 6 + Math.PI / 180 * 270 +second * Math.PI / 180*6;
            //获取当前时间所对应圆的弧度值
            context.beginPath();
            //开始创建
            context.strokeStyle = "rgba("+r+","+g+","+b+","+a+")";
            //填充颜色
            context.lineWidth = 20;
            //设置宽度
            context.arc(250, 250, 200, Math.PI / 2 * 3, x);
            //绘制圆
            context.stroke();
            //颜色填充
        }

        function m() {
            var time = new Date();
            var hour = time.getHours() > 12 ? time.getHours() - 12 : time.getHours();
            var minute = time.getMinutes();
            var second = time.getSeconds();
            var seconds = time.getMilliseconds();
            var r = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var a = Math.random();
            var x = minute * Math.PI / 160 * 6 + Math.PI / 180 * 270 + second*Math.PI/180/10;
            context.beginPath();
            context.strokeStyle = "rgba("+r+","+g+","+b+","+a+")";
            context.lineWidth = 20;
            context.arc(250, 250, 160, Math.PI / 2 * 3, x);
            context.stroke();
        }

        function h() {
            var time = new Date();
            var hour = time.getHours() > 12 ? time.getHours() - 12 : time.getHours();
            var minute = time.getMinutes();
            var second = time.getSeconds();
            var r = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var a = Math.random();
            var x = hour * Math.PI / 180 * 30 + minute * Math.PI / 180 / 2 + Math.PI / 180 * 270;
            context.beginPath();
            context.strokeStyle = "rgba("+r+","+g+","+b+","+a+")";
            context.lineWidth = 20;
            context.arc(250, 250, 120, Math.PI / 2 * 3, x);
            context.stroke();
        }

        function data() {
            context.clearRect(0,0,500,500)
            var time = new Date();
            var thistime = time.toLocaleString();
            var hour = time.getHours() > 12 ? time.getHours() - 12 : time.getHours();
            var minute = time.getMinutes();
            var second = time.getSeconds();
            context.font = "12px 宋体";
            //设置字体样式
            context.fillStyle = "#fff";
            //设置填充色
            context.fillText(thistime, 200, 250)
        }
        var timer = setInterval(function () {
            data();
            s();
            m();
            h();
            
        }, 1)
    </script>
</body>

</html>
凡尘堕世
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 自定义View（一）实现时钟表盘效果
一名互联网时代苟且偷生的 Android码农
05-27 2917
一、前言 Android 自定义View是高级进阶不可或缺的内容，日常工作中，经常会遇到产品、UI设计出花里胡哨的界面。当系统自带的控件不能满足开发需求时，就只能自己动手撸一个效果。 本文就带自定义View初学者手动撸一个效果，通过自定义View实现钟表功能，每行代码都有注释，保证易懂，看不懂你留言打我！！！ 二、实现效果 先看效果图 步骤分析 实现以上效果，主要分为四个步骤： 绘制外层表盘 绘制刻度线 绘制刻度数字 绘制指针 三、代码实现 1、绘制外层表盘 外层表盘就是一个空心圆，只要获取圆的x、y
canvas时钟效果
08-31
总结来说，这个canvas时钟效果是通过JavaScript和HTML5的Canvas API实现的，它结合了时间更新、数字绘制、动画原理以及可能的用户交互，展示了Canvas在动态网页设计中的强大能力。为了完全实现这个时钟，你需要补充...
js阿拉伯数字转成汉字
weixin_34109408的博客
09-05 375
function num2Cn(num){ var chnNumChar = ["零","一","二","三","四","五","六","七","八","九"]; var chnUnitSection = ["","万","亿","万亿","亿亿"]; var chnUnitChar = ["","十","百","千"...
如何实现一个朴实无华的Canvas时钟效果
你好呀，很高兴你在看这里~
09-11 778
一.先看效果：  ???????????? 大家好呀，很久没有写canvas小案例了，今天写一个canvas的时钟案例。效果可能看起来比较简单，没有那些花里胡哨的，不过，它涉及的canvas知识点是比较多的，初学canvas那是必定要会的。下面手把手带你快速实现~ 二.实现步骤（源码在最后）： 1. 设置基本的标签与样式： <div class="clock"> <canvas width="300" height="300" id="canvas"></
教你实现一个朴实的Canvas时钟效果
华为云官方博客
09-14 1009
摘要：今天教大家写一个canvas的时钟案例，效果可能看起来比较简单，没有那些花里胡哨的。
粒子时钟
愿你拥有大风与烈酒,也能享受孤独与自由
12-23 215
粒子时钟 本人比较喜欢加一点花里胡哨的东西…记录一下… 给HTML页面添加一个粒子时钟 在页面加入JS <script> (function(){ var WINDOW_WIDTH = 820; var WINDOW_HEIGHT = 250; var RADIUS = 7; //球半径 var NUMBER_GAP = 10; //数字之间的间隙 var u=0.65; //碰撞能量损耗系数 var context; //Canv
Android自定义View--时钟效果
吴唐人的博客
12-14 1545
初衷 工作四年了，能力水平并没有跟工作年限挂上钩，至今依旧是一个搞开发的小僧。由于公司是做物联网（车载、POS）的，项目UI并不像互联网公司那样花里胡哨的,所以自定义View一直在项目中体现的并不是很多,但是自定义View是一个Android工程师必备的一项基础技能，所以平常也会自己进行一些简单的练习。突发奇想做了一个时钟，感觉挺好玩的，网上也有很多这样的博客，这里也只是做一个小小的分享，能力不足...
花里胡哨的3D翻页卡片，隔壁产品都馋哭了
音视频开发进阶
10-27 384
阅读完本文约需7分钟。废不说，看图，有图有**带有立体纵深的卡片翻页效果，稍加组合和颜色变化就可以搭配出多种不同的风格，如：比赛比分牌卡片翻页时钟一、设计思路如何使得数字的变化更为灵动？...
android自定义起止时间的时间刻度尺,Android 自定义View篇（六）实现时钟表盘效果...
weixin_34031238的博客
05-25 778
前言Android 自定义 View 是高级进阶不可或缺的内容，日常工作中，经常会遇到产品、UI 设计出花里胡哨的界面。当系统自带的控件不能满足开发需求时，就只能自己动手撸一个效果。本文就带自定义 View 初学者手动撸一个效果，通过自定义 View 实现钟表功能，每行代码都有注释，保证易懂，看不懂你留言打我！！！实现效果1、先看效果图在这里插入图片描述2、下载地址3、步骤分析实现以上效果，主要分...
【一步教学，一步到位】花里胡哨的3D翻页卡片，隔壁产品都馋哭了
2401_84537646的博客
05-01 837
android中的matrix是一个3*3的矩阵，如下图scale控制缩放，skew控制错切，trans控制位移，persp控制透视，值得注意的是，旋转操作是通过scale和skew共同作用完成的。android中matix的封装非常完善，使用者无需再去重拾体育老师教授的数学知识，直接调用。这里指的是android.graphics包下的Camera，用于计算3D变换。封装得同样十分完善，使用者无需再用屁股思考控件坐标计算过程，直接调用，同时搭配好对应的matrix。
JavaScript Canvas绘制时钟
02-22
<title>JavaScript Canvas时钟 canvas { border: 1px solid black; } <canvas id="clock" width="300" height="300"></canvas> <script src="clock.js"></script> ``` 接下来，我们将在`clock.js`中...
canvas时钟
12-20
在这个“canvas时钟”的项目中，我们利用了Canvas的这一特性来构建一个能够实时显示时间的时钟。下面将详细介绍这个项目涉及到的核心知识点。 1. **Canvas API**：Canvas是HTML5引入的一个新元素，它提供了一个二维...
canvas时钟 javascript
12-21
在这个“canvas时钟 javascript”项目中，我们看到了如何结合canvas和JavaScript来创建一个实时更新的时钟效果。接下来，我们将深入探讨这个知识点。 首先，canvas是一个二维绘图上下文，通过JavaScript的API可以...
Canvas时钟（纯js实现）
09-29
canvas时钟，极其简单的一个纯网页时钟显示，没有框架，没有jQuery，仅仅使用canvas和原生js实现简单纯粹的闹钟。适合新手小白练习代码，也适合需要定制canvas时钟的场景可以参考本代码实现自己的需求。希望在这个...
CSS3雷达扫描效果
u011626414的专栏
07-23 277
这个示例创建了一个非常基础的雷达扫描效果。您可以根据需要调整颜色、大小、旋转速度等属性，以及添加更多的细节和效果。要创建一个CSS3的雷达扫描效果，我们可以使用CSS的动画（元素在2秒内从0度旋转到360度，从而实现连续的扫描效果。属性设置为50%，这会将扫描线的顶部置于雷达圆的中心，而。的圆形div作为雷达的主体，并在其中放置了一个名为。则会将其向上移动自身高度的一半，从而实现垂直居中。的垂直线，这条线将作为雷达的扫描线。，确保旋转的起点在元素的顶部中心。进行旋转，模拟雷达扫描的效果。
b050闲置图书分享-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-23
本次开发的闲置图书分享平台实现了收货地址管理、字典管理、公告管理、留言板管理、图书管理、图书收藏管理、图书评价管理、图书订单管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让闲置图书分享平台更能从理念走到现实，确确实实的让人们提升信息处理效率。 管理图书的数据，此页面主要实现图书的增加、修改、删除、查看的功能。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。
《大学生职业生涯规划与就业指导》大一阶段课程作业
最新发布
07-24
《大学生职业生涯规划与就业指导》大一阶段课程作业
开题报告潮汕特产直销系统 已通过开题答辩的.doc
07-23
随着互联网的高速发展，人们的生活方式发生了翻天覆地的变化，在过去，人们想要购买很远地方的东西会非常麻烦，因为是通信和交通都不是十分的方便，而现在网络购物成为了人们日常生活中不可或缺的一部分。在这样的背景下，互联网与传统行业的融合已经成为了一种不可阻挡的趋势。对于中国特色的潮汕特产来说，这一趋势也带来了巨大的变革和发展机遇[1]。
html5css3 canvas时钟
05-25
持续集成（CI）和持续部署（CD）是软件开发过程中非常重要的环节，其目的是为了尽可能快地将代码从开发环境交付到生产环境，并保证其质量和稳定性。 持续集成（CI）是指开发人员将代码频繁地提交到版本控制系统，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值