HTML5+JavaScript绘制彩虹和云朵
HTML5+JavaScript绘制彩虹和云朵
彩虹，简称虹，是气象中的一种光学现象，当太阳光照射到半空中的水滴，光线被折射及反射，在天空上形成拱形的七彩光谱，由外圈至内圈呈红、橙、黄、绿、蓝、靛、紫七种颜色。事实上彩虹有无数种颜色，比如，在红色和橙色之间还有许多种细微差别的颜色，但为了简便起见，所以只用七种颜色作为区别。
使用JavaScript来操作Canvas，绘制彩虹和云朵。运行效果：
源码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彩虹</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #F0FFFF; /* 青白色背景 */}canvas {border: 2px solid #000;background-color: #87CEEB; /* 天蓝色 */}</style>
</head>
<body><canvas id="rainbowCanvas" width="400" height="300"></canvas><script>const canvas = document.getElementById('rainbowCanvas');const ctx = canvas.getContext('2d');function drawRainbow() {const centerX = canvas.width / 2;const centerY = canvas.height;const radius = canvas.height * 0.8;// 彩虹颜色const colors = ['#FF0000', // 红'#FF7F00', // 橙'#FFFF00', // 黄'#00FF00', // 绿'#0000FF', // 蓝'#4B0082', // 靛'#9400D3' // 紫];// 绘制彩虹for (let i = colors.length - 1; i >= 0; i--) {ctx.beginPath();ctx.arc(centerX, centerY, radius - i * 20, Math.PI, 0, false);ctx.strokeStyle = colors[i];ctx.lineWidth = 20;ctx.stroke();}// 绘制云朵function drawCloud(x, y, size) {ctx.beginPath();ctx.arc(x, y, size, 0, Math.PI * 2);ctx.arc(x + size, y - size / 2, size * 0.8, 0, Math.PI * 2);ctx.arc(x + size * 2, y, size, 0, Math.PI * 2);ctx.fillStyle = 'white';ctx.fill();}drawCloud(50, 50, 30);drawCloud(canvas.width - 100, 80, 25);}drawRainbow();</script>
</body>
</html>下免改进云彩代码，让云彩从左向右不停地移动。源码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彩虹与移动的云朵</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #F0FFFF; /* 青白色背景 */}canvas {border: 2px solid #000;background-color: #87CEEB; /* 天蓝色 */}</style>
</head>
<body><canvas id="rainbowCanvas" width="400" height="300"></canvas><script>// 获取canvas元素和2D绘图上下文const canvas = document.getElementById('rainbowCanvas');const ctx = canvas.getContext('2d');// 定义云朵对象数组，每个云朵包含位置、大小和速度信息const clouds = [{ x: 50, y: 50, size: 30, speed: 0.5 },{ x: canvas.width - 100, y: 80, size: 25, speed: 0.3 }];// 绘制彩虹的函数function drawRainbow() {const centerX = canvas.width / 2;const centerY = canvas.height;const radius = canvas.height * 0.8;// 定义彩虹的颜色数组const colors = ['#FF0000', // 红'#FF7F00', // 橙'#FFFF00', // 黄'#00FF00', // 绿'#0000FF', // 蓝'#4B0082', // 靛'#9400D3' // 紫];// 从外到内绘制彩虹的每一道颜色for (let i = colors.length - 1; i >= 0; i--) {ctx.beginPath();ctx.arc(centerX, centerY, radius - i * 20, Math.PI, 0, false);ctx.strokeStyle = colors[i];ctx.lineWidth = 20;ctx.stroke();}}// 绘制单个云朵的函数function drawCloud(x, y, size) {ctx.beginPath();// 绘制三个部分组成的云朵形状ctx.arc(x, y, size, 0, Math.PI * 2);ctx.arc(x + size, y - size / 2, size * 0.8, 0, Math.PI * 2);ctx.arc(x + size * 2, y, size, 0, Math.PI * 2);ctx.fillStyle = 'white';ctx.fill();}// 更新云朵位置的函数function updateClouds() {clouds.forEach(cloud => {// 移动云朵cloud.x += cloud.speed;// 如果云朵完全移出画布右侧，将其移回左侧if (cloud.x > canvas.width + cloud.size * 2) {cloud.x = -cloud.size * 2;}});}// 主绘制函数，用于动画循环function draw() {// 清除整个画布ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制彩虹drawRainbow();// 绘制所有云朵clouds.forEach(cloud => drawCloud(cloud.x, cloud.y, cloud.size));// 更新云朵位置updateClouds();// 请求下一帧动画requestAnimationFrame(draw);}// 开始动画循环draw();</script>
</body>
</html>
其中，requestAnimationFrame 是一个现代浏览器提供的用于优化动画性能的 JavaScript 方法，来创建平滑的动画。它允许您告诉浏览器您希望执行一个动画，并请求浏览器在下一次重绘之前调用指定的函数来更新动画。这个方法的主要目的是为了创建更加流畅和高效的动画。使用方法：
function animate() {
// 更新动画状态
// ...
// 请求下一帧
requestAnimationFrame(animate);
}
// 开始动画循环
animate();
相关文章：
HTML5+JavaScript绘制彩虹和云朵
HTML5JavaScript绘制彩虹和云朵 彩虹，简称虹，是气象中的一种光学现象，当太阳光照射到半空中的水滴，光线被折射及反射，在天空上形成拱形的七彩光谱，由外圈至内圈呈红、橙、黄、绿、蓝、靛、紫七种颜色。事实…...
MySQL——单表查询（二）按条件查询（2）带 IN 关键字的查询
IN 关键字用于判断某个字段的值是否在指定集合中，如果字段的值在集合中，则满足条件，该字段所在的记录将被查询出来。其语法格式如下所示： SELECT *|字段名 1,字段名 2,… FROM 表名 WHERE 字段名 [NOT〕IN(元素 1,元素 2,…) 在上…...
【mysql】mysql 用户管理---创建、权限管理等等
本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》：python零基础入门学习 《python运维脚本》： python运维脚本实践 《shell》：shell学习 《terraform》持续更新中：terraform_Aws学习零基础入门到最佳实战 《k8…...
本地服务器物理机中redis设置、取消密码
1.服务器物理机上redis的操作【服务器中操作】 （1）首先先看一下当前运行中的redis实例： [rootiZuf67k70ucx14s6zcv54dZ var]# ps aux | grep redis-server因为我这里有两个实例在运行，即物理机上的redis和docker中的redis&…...
关于xilinx的FFTIP的使用和仿真
工具：vivado2018.3，modelsim10.6d 场景：在进行数据进行频谱分析的时候，使用FPGA来完成FFT的计算可以加快数据的计算速度。 下面使用仿真完成DDS产生的数据的FFT以及IFFT。原始数据使用DDSIP产生，通过IP产生的波形数据…...
ant design pro 如何去保存颜色
上图 就是实现这样的效果 后端是这样的，这个颜色肯定是存到字符串里的 这是第一步 import mongoose, { Schema, Document } from mongoose;interface IDiscountCard extends Document {title: string;subtitle: string;image: string;shopUrl: string;bgColor: s…...
【Hadoop】建立圈内组件的宏观认识
01存储02计算03调度04其他05回忆 众多组件们构建了大规模分布式计算和存储平台。本文介绍Hadoop生态圈中各个组件的主要功能和作用，辅助学者理解每个组件的定位和用途，从而建立对圈内组件的宏观认识。梳理清楚HDFS、MapReduce、YARN、Hive、HBase、Spark…...
C++：命名空间与输入输出
目录 前言 一、命名空间 1.1 namespace的价值 1.2 namespace的定义 1.3 命名空间的使用 二、C输入&输出 前言 C是一种面向对象的计算机程序设计语言，它扩展了C语言的功能，并引入了面向对象编程的概念，如类、继承和多态等&a…...
Azure DevOps Server 数据库日志已满，TF30042: The database is full
Contents 1. 问题描述2. 处理方式 2.1 系统备份2.2 收缩日志2.3 恢复模式2.4 日志增长无法控制 1. 问题描述 Azure DevOps Server 作为微软的软件开发管理平台产品，理所当然地使用了微软的数据库软件SQL Server。 在一个大型的开发团队中，Azure DevOps S…...
[C#]OpenCvSharp 实现Bitmap和Mat的格式相互转换
//转为 bitmap方法一： Bitmap map OpenCvSharp.Extensions.BitmapConverter.ToBitmap(mat); process_pictureBox.Image map; //转为 bitmap方法二： Bitmap map new Bitmap(mat.ToMemoryStream()); process_pictureBox.Image map; //Image img 转为…...
【区块链+金融服务】基于区块链的供应链金融系统 | FISCO BCOS应用案例
传统供应链金融存在着信息不对称、信任问题和繁琐流程等弊端。为了解决这些问题，京北方搭建了基于区块链 的供应链金融系统，提供了更高效、透明、安全和可信的交易环境。 系 统 采 用 FISCO BCOS 为 底 层 链， 技 术 栈 使 用 Java 语 言 进…...
AI语言大模型商业价值深度解析
点击蓝字 关注我 随着人工智能（AI）技术的飞速发展，特别是深度学习算法的进步，AI语言大模型在自然语言处理领域的表现日益突出。国内外多种语言大模型如：OpenAi 的 ChatGpt，阿里通义千问，百度文心…...
理解DDD领域驱动设计思想
一、引言 在软件开发的广袤领域中，领域驱动设计（Domain-Driven Design，简称 DDD）犹如一颗璀璨的明星，备受瞩目。对于期望运用 DDD 开展项目的研发人员而言，明晰 DDD 的本质是实现其有效应用的基石。需注意…...
音频剪辑软件哪个好用？五大音频剪辑软件分享
如果你正打算在家自学视频制作，那么恭喜你，你已经踏上了一段充满魔法与惊喜的旅程！不过，别忘了，视频的灵魂不仅仅在于画面，更在于那直击心灵的音效。 想象一下，一个精心剪辑的片段，…...
12.2 使用prometheus-sdk向pushgateway打点
本节重点介绍 : 使用golang sdk打prometheus4种指标，推送到pushgateway gauge、counter、histogram、summary的初始化4种类似的设置值的方法推送到pushgateway的方法 prometheus配置采集pushgateway，grafana上配大盘 golang-sdk 项目地址 https://git…...
HTTPS 详解
HTTPS 是以安全为目标的 HTTP 通道，它在 HTTP 中加入 SSL 层以提高数据传输的安全性。HTTP 被用于在 Web 浏览器和网站服务器之间传递信息，但以明文形式发送内容，不提供任何方式的数据加密，如果攻击者截取了 Web 浏览器和网站服务…...
Microsoft Edge 使用方法与秘诀概览
目录 编辑引言 Microsoft Edge 功能与技巧概览 掌握这些设置技巧，让 Edge 浏览器的体验更干净 1. 使用阅读视图 2. 开启广告过滤 3. 管理扩展 4. 个性化新标签页 5. 使用网页截图 6. 清理浏览器缓存 7. 管理启动设置 8. 自定义地址栏建议 9. 使用内置笔…...
【视频】onvif、RTP、RTCP、SDP、RTSP、gb21818区别
ONVIF (Open Network Video Interface Forum): ONVIF是一个全球性的开放网络视频接口论坛，致力于发展基于IP网络的物联网设备的标准化。它提供了一个通用的标准接口，使不同厂商生产的网络视频产品能够互相兼容。 RTP (Real-time Transport Protocol): R…...
8-4 循环神经网络
对于 (8.4.2)中的函数 f f f，隐变量模型不是近似值。 毕竟 h t h_{t} ht是可以仅仅存储到目前为止观察到的所有数据， 然而这样的操作可能会使计算和存储的代价都变得昂贵。 回想一下，我们在前面讨论过的具有隐藏单元的隐藏层。 值得注意的…...
Linux系统编程 --- 多线程
线程：是进程内的一个执行分支，线程的执行粒度，要比进程要细。 一、线程的概念 1、Linux中线程该如何理解 地址空间就是进程的资源窗口。 在一个程序里的一个执行路线就叫做线程（thread）。更准确的定义是࿱…...
微信小程序之bind和catch
这两个呢，都是绑定事件用的，具体使用有些小区别。 官方文档： 事件冒泡处理不同 bind：绑定的事件会向上冒泡，即触发当前组件的事件后，还会继续触发父组件的相同事件。例如，有一个子视图绑定了b…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
《Playwright：微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络，将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具，支持 Chrome、Firefox、Safari 等主流浏览器，提供多语言 API（Python、JavaScript、Java、.NET）。它的特点包括&a…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中，接口是一种抽象类型，它定义了一组方法的集合： // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的： // 矩形结构体…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式（Singleton Pattern&#…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件（System Property Definition File），用于声明和管理 Bluetooth 模块相…...
VTK如何让部分单位不可见
最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...