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…...
【leetcode】力扣热门之回文链表【简单难度】
题目描述 给你一个单链表的头节点 head ，请你判断该链表是否为回文链表。如果是，返回 true ；否则，返回 false 。 用例 输入：head [1,2,2,1] 输出：true 输入：head [1,2] 输出：f…...
【MySQL】ALL函数的巧用 以及 排序（order by）巧用 sum(条件表达式) 语法
力扣题 1、题目地址 578. 查询回答率最高的问题 2、模拟表 SurveyLog 表： Column NameTypeidintactionENUMquestion_idintanswer_idintq_numinttimestampint 这张表可能包含重复项。action 是一个 ENUM(category) 数据，可以是 “show”、“answer”…...
Debezium发布历史49
原文地址： https://debezium.io/blog/2019/02/19/reliable-microservices-data-exchange-with-the-outbox-pattern/ 欢迎关注留言，我是收集整理小能手，工具翻译，仅供参考，笔芯笔芯. 使用发件箱模式进行可靠的微服务数…...
数据结构——队列（Queue）
目录 1.队列的介绍 2.队列工程 2.1 队列的定义 2.1.1 数组实现队列 2.1.2 单链表实现队列 2.2 队列的函数接口 2.2.1 队列的初始化 2.2.2 队列的数据插入（入队） 2.2.3 队列的数据删除（出队） 2.2.4 取队头数据 2.2.5 取队…...
uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -后端架构搭建
锋哥原创的uniapp微信小程序投票系统实战： uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频…...
两种方式实现mysql截取年月日
select date_format(now(), %Y-%m-%d) select substring(now(), 1, 10)...
WPF 使用矢量字体图标
矢量字体图标 在WPF项目中经常需要显示图标，但是项目改动后，有时候需要替换和修改图标，这样非常麻烦且消耗开发和美工的时间。为了快速开发项目，节省项目时间，使用图标矢量字体图标是一个非常不错的选择。 矢量字体图标…...
编程语言的语法糖，你了解多少？
什么是语法糖 语法糖是一种编程语言的特性，通常是一些简单的语法结构或函数调用，它可以通过隐藏底层的复杂性，并提供更高级别的抽象，从而使代码更加简洁、易读和易于理解，但它并不会改变代码的执行方式。 为什么需要语…...
MySQL中FLUSH TABLES命令语法
在MySQL中，FLUSH TABLES 命令的作用是刷新表。当你使用 FLUSH TABLES 命令的具体选项时（例如 FLUSH TABLES WITH READ LOCK），该选项必须是在 FLUSH 语句中唯一指定的命令。即，在一个 FLUSH 语句中，你只能使…...
如何在小米4A刷OpenWRT系统并通过cpolar实现公网访问本地路由器
文章目录 前言1. 安装Python和需要的库2. 使用 OpenWRTInvasion 破解路由器3. 备份当前分区并刷入新的Breed4. 安装cpolar内网穿透4.1 注册账号4.2 下载cpolar客户端4.3 登录cpolar web ui管理界面4.4 创建公网地址 5. 固定公网地址访问 前言 OpenWRT是一个高度模块化、高度自…...
asp网站打开/农村电商平台
关于 http://openresty.org/cn/about.html 这个开源 Web 平台主要由章亦春（agentzh）维护。在 2011 年之前曾由淘宝网赞助，在后来的 2012 ~ 2016 年间主要由美国的 CloudFlare 公司 提供支持。目前，OpenResty 主要由 OpenResty 软件…...
用c 做一个小网站怎么做/电脑培训网上免费课程
OSPF多区域原理与配置楔子 其实网路算得上是底层的原理了 根据tcp/ip 七层协议就可以看出 系统原理和网络是不可分割的一部分。生成OSPF多区域的原因改善网络的可扩展性快速收敛OSPF区域的容量划分多区域后，每个OSPF区域里到底可以容纳多少台路由器？单个…...
怎么做好网站营销/免费企业网站建设流程
一、校验图片的类型、大小 function imageVerify(file, size) {//判断上传的文件后缀是否否和规范for(var i 0; i < file.length; i) {var fileSuffix file[i].name.substr(file[i].name.indexOf("."));//判断图片上传的格式if(fileSuffix ! ".jpg…...
企业网站备案还是不用备案/晚上看b站
链接：https://ac.nowcoder.com/acm/contest/699/F来源：牛客网 题目描述 从前有个小哥哥Bill非常喜欢编程，但是让他更加心动的是班上那位小姐姐，为了取得小姐姐的欢心，Bill每天刷acm题，只想着找一个机会大发…...
wordpress 表单 验证码/石家庄手机端seo
现如今，稍微懂点电脑的人，都不愿去购买整套的电脑，而是自己去单独购买一些配件，回家DIY组装电脑，但是在组装的过程中难免会要连接主板电源线，这对于许多新手朋友来说这些装机细节方面还是会存在一些问题&am…...
遵义做网站多少钱/颜色广告
解决方法 左上角file->project structure->modules->->import module->选择项目目录...