当前位置： 首页 > news >正文

HTML5+JavaScript绘制彩虹和云朵

news 2025/12/17 11:52:10

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绘制彩虹和云朵 彩虹&#xff0c;简称虹&#xff0c;是气象中的一种光学现象&#xff0c;当太阳光照射到半空中的水滴&#xff0c;光线被折射及反射&#xff0c;在天空上形成拱形的七彩光谱&#xff0c;由外圈至内圈呈红、橙、黄、绿、蓝、靛、紫七种颜色。事实…...

编程日记 2024/8/18 13:02:28

MySQL——单表查询（二）按条件查询（2）带 IN 关键字的查询

IN 关键字用于判断某个字段的值是否在指定集合中&#xff0c;如果字段的值在集合中&#xff0c;则满足条件&#xff0c;该字段所在的记录将被查询出来。其语法格式如下所示&#xff1a; SELECT *|字段名 1,字段名 2,… FROM 表名 WHERE 字段名 [NOT〕IN(元素 1,元素 2,…) 在上…...

编程日记 2024/8/18 13:01:26

【mysql】mysql 用户管理---创建、权限管理等等

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…...

编程日记 2024/8/18 13:00:25

本地服务器物理机中redis设置、取消密码

1.服务器物理机上redis的操作【服务器中操作】 &#xff08;1&#xff09;首先先看一下当前运行中的redis实例&#xff1a; [rootiZuf67k70ucx14s6zcv54dZ var]# ps aux | grep redis-server因为我这里有两个实例在运行&#xff0c;即物理机上的redis和docker中的redis&…...

编程日记 2024/8/18 12:59:23

关于xilinx的FFTIP的使用和仿真

工具&#xff1a;vivado2018.3&#xff0c;modelsim10.6d 场景&#xff1a;在进行数据进行频谱分析的时候&#xff0c;使用FPGA来完成FFT的计算可以加快数据的计算速度。 下面使用仿真完成DDS产生的数据的FFT以及IFFT。原始数据使用DDSIP产生&#xff0c;通过IP产生的波形数据…...

编程日记 2024/8/18 12:58:22

ant design pro 如何去保存颜色

上图 就是实现这样的效果 后端是这样的&#xff0c;这个颜色肯定是存到字符串里的 这是第一步 import mongoose, { Schema, Document } from mongoose;interface IDiscountCard extends Document {title: string;subtitle: string;image: string;shopUrl: string;bgColor: s…...

编程日记 2024/8/18 12:57:21

【Hadoop】建立圈内组件的宏观认识

01存储02计算03调度04其他05回忆 众多组件们构建了大规模分布式计算和存储平台。本文介绍Hadoop生态圈中各个组件的主要功能和作用&#xff0c;辅助学者理解每个组件的定位和用途&#xff0c;从而建立对圈内组件的宏观认识。梳理清楚HDFS、MapReduce、YARN、Hive、HBase、Spark…...

编程日记 2024/8/18 12:56:20

C++：命名空间与输入输出

目录 前言 一、命名空间 1.1 namespace的价值 1.2 namespace的定义 1.3 命名空间的使用 二、C输入&输出 前言 C是一种面向对象的计算机程序设计语言&#xff0c;‌它扩展了C语言的功能&#xff0c;‌并引入了面向对象编程的概念&#xff0c;‌如类、‌继承和多态等&a…...

编程日记 2024/8/18 12:53:17

Azure DevOps Server 数据库日志已满，TF30042: The database is full

Contents 1. 问题描述2. 处理方式 2.1 系统备份2.2 收缩日志2.3 恢复模式2.4 日志增长无法控制 1. 问题描述 Azure DevOps Server 作为微软的软件开发管理平台产品&#xff0c;理所当然地使用了微软的数据库软件SQL Server。 在一个大型的开发团队中&#xff0c;Azure DevOps S…...

编程日记 2024/8/18 12:49:13

[C#]OpenCvSharp 实现Bitmap和Mat的格式相互转换

//转为 bitmap方法一&#xff1a; Bitmap map OpenCvSharp.Extensions.BitmapConverter.ToBitmap(mat); process_pictureBox.Image map; //转为 bitmap方法二&#xff1a; Bitmap map new Bitmap(mat.ToMemoryStream()); process_pictureBox.Image map; //Image img 转为…...

编程日记 2024/8/18 12:48:11

【区块链+金融服务】基于区块链的供应链金融系统 | FISCO BCOS应用案例

传统供应链金融存在着信息不对称、信任问题和繁琐流程等弊端。为了解决这些问题&#xff0c;京北方搭建了基于区块链 的供应链金融系统&#xff0c;提供了更高效、透明、安全和可信的交易环境。 系 统 采 用 FISCO BCOS 为 底 层 链&#xff0c; 技 术 栈 使 用 Java 语 言 进…...

编程日记 2024/8/18 12:46:09

AI语言大模型商业价值深度解析

点击蓝字 关注我 随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;特别是深度学习算法的进步&#xff0c;AI语言大模型在自然语言处理领域的表现日益突出。国内外多种语言大模型如&#xff1a;OpenAi 的 ChatGpt&#xff0c;阿里通义千问&#xff0c;百度文心…...

编程日记 2024/8/18 12:44:06

理解DDD领域驱动设计思想

一、引言 在软件开发的广袤领域中&#xff0c;领域驱动设计&#xff08;Domain-Driven Design&#xff0c;简称 DDD&#xff09;犹如一颗璀璨的明星&#xff0c;备受瞩目。对于期望运用 DDD 开展项目的研发人员而言&#xff0c;明晰 DDD 的本质是实现其有效应用的基石。需注意…...

编程日记 2024/8/18 12:43:05

音频剪辑软件哪个好用？五大音频剪辑软件分享

如果你正打算在家自学视频制作&#xff0c;那么恭喜你&#xff0c;你已经踏上了一段充满魔法与惊喜的旅程&#xff01;不过&#xff0c;别忘了&#xff0c;视频的灵魂不仅仅在于画面&#xff0c;更在于那直击心灵的音效。 想象一下&#xff0c;一个精心剪辑的片段&#xff0c;…...

编程日记 2024/8/18 12:41:03

12.2 使用prometheus-sdk向pushgateway打点

本节重点介绍 : 使用golang sdk打prometheus4种指标&#xff0c;推送到pushgateway gauge、counter、histogram、summary的初始化4种类似的设置值的方法推送到pushgateway的方法 prometheus配置采集pushgateway&#xff0c;grafana上配大盘 golang-sdk 项目地址 https://git…...

编程日记 2024/8/18 12:40:02

HTTPS 详解

HTTPS 是以安全为目标的 HTTP 通道&#xff0c;它在 HTTP 中加入 SSL 层以提高数据传输的安全性。HTTP 被用于在 Web 浏览器和网站服务器之间传递信息&#xff0c;但以明文形式发送内容&#xff0c;不提供任何方式的数据加密&#xff0c;如果攻击者截取了 Web 浏览器和网站服务…...

编程日记 2024/8/18 12:37:59

Microsoft Edge 使用方法与秘诀概览

目录 ​编辑引言 Microsoft Edge 功能与技巧概览 掌握这些设置技巧&#xff0c;让 Edge 浏览器的体验更干净 1. 使用阅读视图 2. 开启广告过滤 3. 管理扩展 4. 个性化新标签页 5. 使用网页截图 6. 清理浏览器缓存 7. 管理启动设置 8. 自定义地址栏建议 9. 使用内置笔…...

编程日记 2024/8/18 12:36:58

【视频】onvif、RTP、RTCP、SDP、RTSP、gb21818区别

ONVIF (Open Network Video Interface Forum): ONVIF是一个全球性的开放网络视频接口论坛&#xff0c;致力于发展基于IP网络的物联网设备的标准化。它提供了一个通用的标准接口&#xff0c;使不同厂商生产的网络视频产品能够互相兼容。 RTP (Real-time Transport Protocol): R…...

编程日记 2024/8/18 12:33:54

8-4 循环神经网络

对于 (8.4.2)中的函数 f f f&#xff0c;隐变量模型不是近似值。 毕竟 h t h_{t} ht​是可以仅仅存储到目前为止观察到的所有数据&#xff0c; 然而这样的操作可能会使计算和存储的代价都变得昂贵。 回想一下&#xff0c;我们在前面讨论过的具有隐藏单元的隐藏层。 值得注意的…...

编程日记 2024/8/18 12:32:53

Linux系统编程 --- 多线程

线程&#xff1a;是进程内的一个执行分支&#xff0c;线程的执行粒度&#xff0c;要比进程要细。 一、线程的概念 1、Linux中线程该如何理解 地址空间就是进程的资源窗口。 在一个程序里的一个执行路线就叫做线程&#xff08;thread&#xff09;。更准确的定义是&#xff1…...

编程日记 2024/8/18 12:24:44

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2025/9/22 20:29:32

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2025/12/14 7:37:45

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2025/12/14 21:52:48

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/9/12 0:57:34

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/12/13 6:14:10

向量几何的二元性：叉乘模长与内积投影的深层联系

在数学与物理的空间世界中&#xff0c;向量运算构成了理解几何结构的基石。叉乘&#xff08;外积&#xff09;与点积&#xff08;内积&#xff09;作为向量代数的两大支柱&#xff0c;表面上呈现出截然不同的几何意义与代数形式&#xff0c;却在深层次上揭示了向量间相互作用的…...

编程新知 2025/12/12 13:29:06

LUA+Reids实现库存秒杀预扣减 记录流水 以及自己的思考

目录 lua脚本 记录流水 记录流水的作用 流水什么时候删除 我们在做库存扣减的时候&#xff0c;显示基于Lua脚本和Redis实现的预扣减 这样可以在秒杀扣减的时候保证操作的原子性和高效性 lua脚本 // ... 已有代码 ...Overridepublic InventoryResponse decrease(Inventor…...

编程新知 2025/9/24 10:06:05