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();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/50942.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【流媒体】RTMPDump—RTMP_ConnectStream(创建流连接)

目录 1. RTMP_ConnectStream函数1.1 读取packet&#xff08;RTMP_ReadPacket&#xff09;1.2 解析packet&#xff08;RTMP_ClientPacket&#xff09;1.2.1 设置Chunk Size&#xff08;HandleChangeChunkSize&#xff09;1.2.2 用户控制信息&#xff08;HandleCtrl&#xff09;1…

嵌入式开发就业方向有哪些?前景未来可期!

在科技日新月异的今天&#xff0c;嵌入式系统几乎渗透到了我们生活的各个角落。从简单的家用电器到复杂的工业自动化设备&#xff0c;再到我们手中的智能手机&#xff0c;无一不体现出嵌入式技术的魅力。因此&#xff0c;嵌入式领域的就业前景广阔&#xff0c;为众多求职者提供…

职场难题怎么破?六西格玛培训给你答案!

在当今追求高效与卓越的职场环境中&#xff0c;六西格玛培训如同一股强劲的东风&#xff0c;为众多职场人士带来了提升自我、突破瓶颈的契机。作为起源于摩托罗拉、在通用电气得到广泛应用的管理方法论&#xff0c;六西格玛以其严谨的数据分析、持续的流程优化和卓越的质量提升…

【Kubernetes】k8s集群存储卷(pvc存储卷)

目录 一、PVC存储卷 1.PV 2.PVC 3.StorageClass 4.PV和PVC的生命周期 二、案例 1.创建静态pv 1.1.配置nfs 1.2.创建pv 1.3.创建pvc 1.4.结合pod&#xff0c;将pv、pvc一起运行 2.创建动态pv 2.1.上传 2.2.创建 Service Account&#xff0c;用来管理 NFS Provisio…

一次网络攻击损失170亿元

一次网络攻击能给企业造成多大损失&#xff1f;医疗IT巨头美国联合健康集团给出的答案是——170亿元&#xff01; 今年2月&#xff0c;联合健康集团的子公司、美国最大的商业处方处理商Change Healthcare遭遇网络攻击&#xff0c;导致全美约1/3的医疗机构无法开具处方&#xf…

公认最强充电宝有哪些?盘点四款公认强悍级别充电宝推荐

随着智能手机和其他移动设备的广泛应用&#xff0c;充电宝已经成为我们生活中不可或缺的一部分。然而&#xff0c;市场上众多品牌和型号的充电宝也让消费者面临选择难题&#xff0c;安全隐患也随之浮现。因此&#xff0c;选择一款安全可靠、性能卓越的充电宝显得尤为重要。本文…

[数据集][目标检测]起子检测数据集VOC+YOLO格式1215张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1215 标注数量(xml文件个数)&#xff1a;1215 标注数量(txt文件个数)&#xff1a;1215 标注…

python逻辑控制 学习

if 语句 普通if &#xff0c;与多条件语句 #! /usr/bin/python3 age int(input("请输入你的年龄&#xff1a;")) print("你今年", age, "岁了。") if age < 18:print("你还未成年&#xff0c;请多加努力&#xff01;") elif age …

mysql 彻底重装(删除所有数据)

文章目录 1. 停止 MySQL 服务2. 删除数据库文件a) 先确定数据文件的datadir是在哪里。b) 如果还是没找到&#xff0c;终端中输入命令 3. 重新初始化 MySQL 数据目录4. 启动 MySQL 服务5. 重新设置 root 用户密码 有时候mysql的密码配置错误&#xff0c;连接不上mysql&#xff0…

[802.11e]WMM

WMM概念 WiFi WMM&#xff08;无线多媒体&#xff09;是一种用于无线局域网&#xff08;WLAN&#xff09;的QoS&#xff08;服务质量&#xff09;标准。WMM旨在提供更好的网络性能&#xff0c;特别是在传输多媒体内容&#xff08;如音频和视频&#xff09;时。它通过对不同类型…

PyTorch 基础学习

文章索引&#xff1a; PyTorch 基础学习&#xff08;1&#xff09; - 快速入门 PyTorch 基础学习&#xff08;2&#xff09;- 张量 Tensors PyTorch 基础学习&#xff08;3&#xff09; - 张量的数学操作 PyTorch 基础学习&#xff08;4&#xff09;- 张量的类型 PyTorch 基础学…

Halcon20.11深度学习目标检测模型

1.前言&#xff1a;.Halcon的深度学习标注工具一直在更新&#xff0c;我下载的20.11版本的Deep Learning Tool已经显示过期&#xff0c;无奈只能下载最新版MVTec Deep Learning Tool 24.05。不过最新版的标注工具做的很人性化&#xff0c;分类&#xff0c;目标检测&#xff0c;…

axios 上传 和下载 excel 文件

axios 上传 和下载 excel 文件 上传 excel 文件 axios 请求配置 import axios from axios// 导入&#xff08;校验数据&#xff09; export const postFile (data) > {return axios.post({url: 上传地址,data,headers: {Content-Type: multipart/form-data}}) }调用方法处 …

口语笔记——连词

连词 可以 连接主、谓、宾、表、副、介、补语、定语、状语、同位语&#xff08;如下面连词and中的示例&#xff09;。 and I and he went to shanghai. 主语I like basketball and football. 宾语He is kind and friendly. 表语He runs fast and beautifully. 副词I went to …

【Java】—— 使用Java编写程序找出100以内的质数

质数的定义与性质 质数是指只能被1和自身整除的正整数。根据定义&#xff0c;质数必须大于1。例如&#xff0c;2、3、5、7、11等都是质数。质数的性质如下&#xff1a; 每个大于1的自然数要么是质数&#xff0c;要么可以分解成几个质数的乘积。除了2和3之外&#xff0c;所有的…

获取阿里云Docker镜像加速器地址

注册并登录阿里云账号&#xff1a;首先&#xff0c;你需要有一个阿里云账号。如果还没有&#xff0c;可以在阿里云官网注册。 访问容器镜像服务&#xff1a;登录后&#xff0c;进入“产品与服务”&#xff0c;找到“容器服务”或“容器镜像服务”。阿里云容器服务 找到镜像加…

iOS开发进阶(二十二):Xcode* 离线安装 iOS Simulator

文章目录 一、前言二、模拟器安装 一、前言 Xcode 15 安装包的大小相比之前更小&#xff0c;因为除了 macOS 的 Components&#xff0c;其他都需要动态下载安装&#xff0c;否则提示 iOS 17 Simulator Not Installed。 如果不安装对应的运行模拟库&#xff0c;真机和模拟器无法…

【UE】关卡实例基本介绍与使用

目录 一、什么是关卡实例 二、创建关卡实例 三、编辑关卡实例 四、破坏关卡实例 五、创建关卡实例蓝图 一、什么是关卡实例 关卡实例本质上是一个已存在关卡的可重复使用的实例化版本。它基于原始关卡&#xff0c;但可以在运行时进行独立的修改和定制&#xff0c;同时保持…

哪个牌子的开放式耳机性价比高?五款地表最强机型推荐!

在我们的日常生活中&#xff0c;街道、地铁车厢或公交车等地方常常充满了噪音&#xff0c;这些杂音不仅可能扰乱心情&#xff0c;还可能对我们的听力造成潜在的伤害。在这样的环境下&#xff0c;如果想要享受音乐或追剧&#xff0c;同时又能保持对周围环境的警觉&#xff0c;开…

【WebSocket】websocket学习【二】

1.需求&#xff1a;通过websocket实现在线聊天室 2.流程分析 3.消息格式 客户端 --> 服务端 {"toName":"张三","message":"你好"}服务端 --> 客户端 系统消息格式&#xff1a;{"system":true,"fromName"…