HTML5和JS实现明媚月色效果

HTML5和JS实现明媚月色效果

先给出效果图:

源码如下:

<!DOCTYPE html>
<html>
<head><title>明媚月光效果</title><style>body {margin: 0;overflow: hidden;background-color: #000; /* 添加一个深色背景以便看到月光效果 */}#moonlightCanvas {position: absolute;top: 0;left: 0;}</style>
</head>
<body><canvas id="moonlightCanvas"></canvas><script>window.addEventListener("load", function() {function drawMoonlight() {var canvas = document.getElementById("moonlightCanvas");var ctx = canvas.getContext("2d");canvas.width = window.innerWidth;canvas.height = window.innerHeight;var centerX = canvas.width / 2;var centerY = canvas.height / 2;var moonRadius = 50; // 月亮的半径,您可以根据需要调整大小// 绘制星星function drawStars() {var starCount = 50; // 星星的数量for (var i = 0; i < starCount; i++) {var x = Math.random() * canvas.width;var y = Math.random() * canvas.height;var starRadius = Math.random() * 2.5; // 星星的大小ctx.beginPath();ctx.arc(x, y, starRadius, 0, Math.PI * 2, false);ctx.fillStyle = "yellow";ctx.fill();}for (var i = 0; i < starCount; i++) {var x = Math.random() * canvas.width;var y = Math.random() * canvas.height;var starRadius = Math.random() * 2.5; // 星星的大小ctx.beginPath();ctx.arc(x, y, starRadius, 0, Math.PI * 2, false);ctx.fillStyle = "white";ctx.fill();}}drawStars(); // 绘制星星// 绘制月亮ctx.beginPath();ctx.arc(centerX, centerY, moonRadius, 0, 2 * Math.PI, false);ctx.fillStyle = "rgba(255, 255, 255, 1)"; // 不透明的白色ctx.fill();// 绘制明媚月光效果var gradient = ctx.createRadialGradient(centerX, centerY, moonRadius, centerX, centerY, canvas.width);gradient.addColorStop(0, "rgba(173, 216, 230, 0.3)"); // 浅蓝色半透明gradient.addColorStop(1, "rgba(255, 255, 255, 0)"); // 完全透明ctx.fillStyle = gradient;ctx.fillRect(0, 0, canvas.width, canvas.height);}drawMoonlight();});</script>
</body>
</html>

绘制一个代表月亮的圆形,月亮的半径设置为了一个固定值(moonRadius = 50;),可以根据自己的需要调整这个值。然后在它的周围添加了一个更大的渐变来模拟散发的月光效果。你可以尝试修改渐变的颜色或透明度。drawStars函数来绘制星星,这个函数通过在画布上随机位置画上小点来模拟星星。starCount变量控制星星的数量,而starRadius变量控制每个星星的大小。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/605805.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SSM医院预约挂号系统【源码】【最详细运行文档】

SSM医院预约挂号系统【源码】【最详细运行文档】 系统简介系统涉及系统运行系统演示源码获取 系统简介 随着医疗水平的提高&#xff0c;以及人们对于健康的观念越来越重视&#xff0c;出入医院成了一种常见的现象。而随着看病人数增多&#xff0c;经常出现挂号难的现象。一部分…

ME8206 电流模式准谐振 PWM 控制器 输出功率可达100W

描述&#xff1a; ME8206 是一个电流模式准谐振 PWM 控制器&#xff0c;在 85V-265V 的宽电压范围内提供高达 100W 的输出功率&#xff0c; 在大范围的负载和输入电压变化情况下确保谷底电压导通。 ME8206 采用高压启动设计&#xff0c;芯片直接连接到高压&#xff0c; 以提供芯…

word技巧

word这个东西有的时候令人又爱又恨&#xff0c;很多用上的时候都是因为自己贫瘠的技巧而令人抓狂&#xff0c;比如设置一个页脚和页眉&#xff0c;首页如何不同&#xff1f;目录页如何设置罗马数字&#xff1f;页眉前面几页不要横线&#xff0c;后面几页要横线&#xff0c;谨以…

SQL注入是什么呢?

SQL注入是一种常见的攻击方式&#xff0c;攻击者通过在Web应用程序的输入字段中插入恶意的SQL代码&#xff0c;从而可以执行未经授权的数据库操作。这种攻击方式通常利用了应用程序对用户输入的不充分验证和过滤&#xff0c;使得攻击者能够通过输入恶意代码来绕过应用程序的安全…

【技术科普】什么是达芬奇架构?有什么优势?

芯片架构是指芯片设计的基本结构和组织方式&#xff0c;用于实现各种计算、存储和通信功能。芯片架构通常包括处理器核心、内存、输入输出接口等组成部分&#xff0c;这些部分的设计对芯片性能和功耗有着直接的影响&#xff0c;世界上主流的芯片架构主要包括x86、ARM、PowerPC和…

RAC 环境下spfile 下参数的修改,所有node或个别node

------ 和没有 SQL> create spfiledata from pfile/tmp/pfile; File created. SQL> exit Disconnected from Oracle Database 19c Enterprise Edition Release 19.0.0.0.0 - Production Version 19.20.0.0.0 [oraclerac1 ~]$ srvctl config database -d cdb Database …

【C语言】一种状态超时阻塞循环查询的办法

【C语言】一种状态超时阻塞循环查询的办法 文章目录 【C语言】一种状态超时阻塞循环查询的办法1.方法12.方法21.方法1 static void wait_notify_async(notify_type_t notify_type) {static rt_tick_t exit_tick;exit_tick = rt_time_get_msec();lb_int32 notify_success = RT_F…

vue-springboot基于java的社区志愿者活动信息管理系统 e2y4d

社区志愿者信息管理系统的主要开发目标如下&#xff1a; &#xff08;1&#xff09;对零碎化、分布散的数据信息进行收纳、整理&#xff0c;通过网络服务平台使这些信息内容更加调理&#xff0c;更加方便化和清晰化&#xff0c;让访问该系统的每个用户享受浏览的过程。 &#x…

5308. 公路

题意 有n 个站点&#xff0c;站点可以加油&#xff0c;站点之间的油的价格不一定相等&#xff0c;站点的编号从1到n&#xff0c;站点之间的距离用v表示&#xff0c;站点的油价用a表示&#xff0c;求从1站点到n站点所需要的最小的油价是多少 数据范围 对于所有测试数据保证&a…

google 内购记录

1.GooglePlay内购服务器验单配置 &#xff08;新版本好像不需要API 配置关联&#xff0c;好像不需要了&#xff09; 详细配置url: https://blog.csdn.net/wuyutaoktm/article/details/122450878 2. 用golang代码实现&#xff0c;主要是验证订单和发币,PAY_JSON 是上一个步骤申…

Java后端开发——Ajax、jQuery和JSON

Java后端开发——Ajax、jQuery和JSON 概述 Ajax全称是Asynchronous Javascript and XML&#xff0c;即异步的JavaScript和 XML。Ajax是一种Web应用技术&#xff0c;该技术是在JavaScript、DOM、服务器配合下&#xff0c;实现浏览器向服务器发送异步请求。 Ajax异步请求方式不…

螺纹钢负公差测径仪获得哪些信息?

螺纹钢负公差轧制是很多厂家在使用的一种轧制方式&#xff0c;蓝鹏测控在推出普通型轧钢测径仪和智能型轧钢测径仪后&#xff0c;又推出了可显示负公差信息的测径仪&#xff0c;本文来简单看一下螺纹钢负公差轧制能从测径仪中获得哪些信息&#xff1f; 负公差测径仪为了能对螺纹…

Java+springboot+vue智慧校园源码,数据云平台Web端+小程序教师端+小程序家长端

技术架构&#xff1a; Javaspringbootvue element-ui小程序电子班牌&#xff1a;Java Android演示自主版权。 智慧校园电子班牌人脸识别系统全套源码&#xff0c;包含&#xff1a;数据云平台Web端小程序教师端小程序家长端电子班牌 学生端。 电子班牌系统又称之为智慧班牌&am…

什么是本地存储的有效期?

本地缓存设置有效期&#xff1f; 使用localStorage本地缓存存储数据时不能像cookie那样设置有效期&#xff0c;使得数据会一直存在浏览器中&#xff0c;除非人为删除。这时我们可以封装一下localStorage&#xff0c;在需要有效期的数据存储时同时设置到期时间&#xff0c;读取的…

2024 极术通讯-AI 2024:端、边AI将成为硬件厂商布局重点

导读&#xff1a;极术社区推出极术通讯&#xff0c;引入行业媒体和技术社区、咨询机构优质内容&#xff0c;定期分享产业技术趋势与市场应用热点。 芯方向 Helium 技术讲堂 | 为何不直接采用 Neon&#xff1f; 当人工智能 (AI) 下沉到各式各样的应用当中&#xff0c;作为市场…

【设计模式之美】SOLID 原则之三:里式替换(LSP)跟多态有何区别?如何理解LSP中子类遵守父类的约定

文章目录 一. 如何理解“里式替换原则”&#xff1f;二. 哪些代码明显违背了 LSP&#xff1f;三. 回顾 一. 如何理解“里式替换原则”&#xff1f; 子类对象能够替换程序中父类对象出现的任何地方&#xff0c;并且保证原来程序的逻辑行为不变及正确性不被破坏。 里氏替换原则…

Sui链上铭文爆火,TPS近6000领先同行

在2023年接近尾声时&#xff0c;用户涌入众多智能合约平台进行铭文相关交易&#xff0c;无意中对各种网络进行了压力测试。在许多平台出现拥堵和费用飙升的情况下&#xff0c;Sui通过实现令人印象深刻的TPS&#xff0c;在没有减速或gas费用激增的情况下脱颖而出。 最初用于比特…

人工智能(AI)在未来电影制作业中的革命性影响及挑战

随着人工智能&#xff08;AI&#xff09;技术的不断突破&#xff0c;其对电影制作行业的改造和影响日益显著。本文旨在深入探讨AI在未来的应用将如何重塑电影制作流程、提升作品质量&#xff0c;并同时面对的挑战与变革。 一、优化电影制作流程与降低成本 AI在电影制作中的应用…

vue3+vite +element plus日历date picker中文显示

项目情况 element-plus 默认是英文模式&#xff0c;需要中文模式的话需要设置一下&#xff1a; 项目框架&#xff08;vue3&#xff09;&#xff1a;vite JS element-plus 版本&#xff1a;&#xff08;注意版本兼容&#xff0c;element plus 较低版本&#xff1a;1.xx.xx&a…

Docker 容器管理和镜像管理基础知识(二)

Docker 容器管理和镜像管理 容器管理 docker create 命令用于在 Docker 中创建一个新的容器&#xff0c;但不会自动启动它。这个命令会返回容器的 ID&#xff0c;可以使用它来 进一步操作容器&#xff0c;这也是与 docker run 命令的一个区别 以下是 docker create 的基本用…