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变量控制每个星星的大小。
相关文章：
HTML5和JS实现明媚月色效果
HTML5和JS实现明媚月色效果 先给出效果图： 源码如下： <!DOCTYPE html> <html> <head><title>明媚月光效果</title><style>body {margin: 0;overflow: hidden;background-color: #000; /* 添加一个深色背景以便看到…...
Django5+DRF序列化
概述 本教程将介绍如何创建一个简单的粘贴板代码高亮 Web API。在此过程中，它将介绍构成 REST 框架的各种组件，让你全面了解所有组件是如何组合在一起的。 本教程相当深入，因此在开始学习之前，你可能需要先吃一块饼干࿰…...
什么是编译程序和解释程序
一、编译程序 1、编译器接收源代码作为输入，它会一次性地将整个源代码程序转换成目标代码（通常是机器语言或汇编语言），这个过程包括词法分析、语法分析、语义分析、优化以及最终的目标代码生成。2、编译后的目标代码是一个独立的…...
文档审阅批注的合并和对比
#创作灵感# 最近在改论文，Feedback返回的时候，把之前的批注都删了，这就增加了工作量，看起来不方便，所以就需要将删掉的批注全部复原。 那在原来的文档重新在修改一遍，工作量还是很大的，所以这里…...
广义零样本学习综述的笔记
1 Title A Review of Generalized Zero-Shot Learning Methods（Farhad Pourpanah; Moloud Abdar; Yuxuan Luo; Xinlei Zhou; Ran Wang; Chee Peng Lim）【IEEE Transactions on Pattern Analysis and Machine Intelligence 2022】 2 conclusion Generali…...
java每日一题——输出9x9乘法表（答案及编程思路）
前言： 打好基础，daydayup! 题目：输出下图9x9乘法表 编程思路：java只能输出行，不能输出列，所以考虑好每一行输出的内容即可 public class demo {public static void main(String[] args) {for (int i 1; i…...
Android 车联网——基础简介（一）
传统的车载功能单一，无太多娱乐性，而随着智能化时代的发展，车载系统也被赋予了在系统中预装 Android 应用的能力，基于Android平台的车载信息娱乐系统 —— Android AutoMotive 应运而生。 一、AutoMotive简介 Android Automotive OS 车载操作系统，是一个基本 Android 平台…...
自动驾驶货车编队行驶系统功能规范
货车编队行驶功能规范 Truck Platooning Functional Specification 目录 1 概述... 7 1.1 目的... 7 1.2 范围... 7 1.3 术语及缩写... 7 1.4 参考法规标准... 8 2 功能规范... 9 2.1 功能描述... 9 2.1.1 功能用途…...
javafx
JavaFX JavaFX简介 JavaFX是一个用于创建富客户端应用程序的图形用户界面（GUI）框架。它是Java平台的一部分，从Java 8开始成为Java的标准库。 JavaFX提供了丰富的图形和多媒体功能，使开发人员能够创建具有吸引力和交互性的应用程…...
玩转贝启科技BQ3588C开源鸿蒙系统开发板 —— 编译构建及此过程中的踩坑填坑（3）
接前一篇文章：玩转贝启科技BQ3588C开源鸿蒙系统开发板 —— 编译构建及此过程中的踩坑填坑（2） 上一篇文章结束时在等待提示的各依赖包下载安装后的编译结果，但是很遗憾，编译并没有最终完成，既未成功也没有失…...
SQL ORDER BY 关键字
ORDER BY 关键字用于对结果集进行排序。 SQL ORDER BY 关键字 ORDER BY 关键字用于对结果集按照一个列或者多个列进行排序。 ORDER BY 关键字默认按照升序对记录进行排序。如果需要按照降序对记录进行排序，您可以使用 DESC 关键字。 SQL ORDER BY 语法 SELECT …...
多线程-生产者消费者模型
一、基本信息 1、场景介绍：厨师和吃货的例子，吃货吃桌子上的面条，吃完让厨师做，厨师做完面条放桌子上，让吃货吃，厨师如果发现桌子上有面条，就不做，吃货发现桌子上没有面条就不吃。 …...
解压命令之一 gzip
文章目录 解压命令之一 gzip更多信息 解压命令之一 gzip gzip用于对后缀为gz文件进行解压： $ gzip -d data.gz这个命令将解压examplefile.gz，并且在当前目录下生成一个名为data的解压后的文件。 但特别需要留意的是，这个操作会删除源文件&…...
力扣：438. 找到字符串中所有字母异位词 题解
Problem: 438. 找到字符串中所有字母异位词 438. 找到字符串中所有字母异位词 预备知识解题思路复杂度Code其它细节推荐博客或题目博客题目滑动窗口哈希表 预备知识 此题用到了双指针算法中的滑动窗口思想，以及哈希表的运用。c中是unordered_map。如果对此不了解的u…...
QT 高DPI解决方案
一、根据DPI实现动态调整控件大小（三种方式） 1、QT支持高DPI（针对整个进程中所有的UI） // main函数中 QApplication::setAttribute(Qt::AA_EnableHighDpiScaling)tips：（1）如果不想全局设置&am…...
SLB、DMZ、Nginx、Ingress、Gateway、Kibana和Grafana
SLB、DMZ、Nginx、Ingress、Gateway、Kibana和Grafana虽然有一些相似之处，但是它们的功能和适用场景还是有所不同。 SLB主要用于将大流量的请求分配到多个服务器上进行处理，从而提高系统的可伸缩性和可靠性。它适用于需要处理大流量的应用，如…...
【已解决】Invalid bound statement (not found)
报错讯息 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.casey.mapper.SysRoleMapper.getUserRoleCode at org.apache.ibatis.binding.MapperMethod S q l C o m m a n d . < i n i t > ( M a p p e r M e t h o d . j a v a :…...
)
汽车信息安全--芯片厂、OEM安全启动汇总(1)
目录 1.芯驰E3安全启动 2.STM32 X-CUBE-SBSFU 3.小米澎湃OS安全启动 4.小结 我在前篇文章里详细记录了车规MCU信息安全设计过程关于网络安全架构的思考过程，从芯片原厂、供应商、OEM等角度思考如何建立起完备的信任链； 不过这思考过程仅仅只是一家之言，因此我又对比了国…...
气膜建筑：舒适、智能、可持续
气膜建筑之所以能够拥有广阔的发展空间，源于其融合了诸多优势特点，使其成为未来建筑领域的前沿趋势。 气膜建筑注重环境可持续性和能源效率。在材料和设计上，它采用可回收材料、提高热保温效果，并积极利用太阳能等可再生能源&…...
【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…...
盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来
一、破局：PCB行业的时代之问 在数字经济蓬勃发展的浪潮中，PCB（印制电路板）作为 “电子产品之母”，其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透，PCB行业面临着前所未有的挑战与机遇。产品迭代…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接：A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串，只有在同时为 o 时输出 Yes 并结束程序，否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...
.Net Framework 4/C# 关键字（非常用，持续更新...）
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域，向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能，能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作，并通过具体…...
算法：模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣（LeetCode） 遍历字符串：通过外层循环逐一检查每个字符。遇到 ? 时处理： 内层循环遍历小写字母（a 到 z）。对每个字母检查是否满足： 与…...