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

HTML5+JavaScript绘制彩虹和云朵

news 2025/10/31 16:51:47

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

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/10/28 22:51:20

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/10/26 22:57:36

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2025/10/30 7:28:30

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/8/15 18:53:03

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2025/8/22 13:56:38

云原生安全实战：API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

编程新知 2025/10/28 19:50:22

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/9/28 19:00:18

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

编程新知 2025/9/14 12:09:11