• HTML5+JavaScript绘制彩虹和云朵

    HTML5+JavaScript绘制彩虹和云朵

    彩虹，简称虹，是气象中的一种光学现象，当太阳光照射到半空中的水滴，光线被折射及反射，在天空上形成拱形的七彩光谱，由外圈至内圈呈红、橙、黄、绿、蓝、靛、紫七种颜色。事实上彩虹有无数种颜色，比如，在红色和橙色之间还有许多种细微差别的颜色，但为了简便起见，所以只用七种颜色作为区别。

    使用JavaScript来操作Canvas，绘制彩虹和云朵。运行效果：

    源码如下：

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>彩虹title>
    7.     <style>
    8.         body {
    9.             display: flex;
    10.             justify-content: center;
    11.             align-items: center;
    12.             height: 100vh;
    13.             margin: 0;
    14.             background-color: #F0FFFF; /* 青白色背景 */
    15.         }
    16.         canvas {
    17.             border: 2px solid #000;
    18.             background-color: #87CEEB; /* 天蓝色 */
    19.         }
    20.     style>
    21. head>
    22. <body>
    23.     <canvas id="rainbowCanvas" width="400" height="300">canvas>
    24.  
    25.     <script>
    26.         const canvas = document.getElementById('rainbowCanvas');
    27.         const ctx = canvas.getContext('2d');
    28.  
    29.         function drawRainbow() {
    30.             const centerX = canvas.width / 2;
    31.             const centerY = canvas.height;
    32.             const radius = canvas.height * 0.8;
    33.  
    34.             // 彩虹颜色
    35.             const colors = [
    36.                 '#FF0000', // 红
    37.                 '#FF7F00', // 橙
    38.                 '#FFFF00', // 黄
    39.                 '#00FF00', // 绿
    40.                 '#0000FF', // 蓝
    41.                 '#4B0082', // 靛
    42.                 '#9400D3'  // 紫
    43.             ];
    44.  
    45.             // 绘制彩虹
    46.             for (let i = colors.length - 1; i >= 0; i--) {
    47.                 ctx.beginPath();
    48.                 ctx.arc(centerX, centerY, radius - i * 20, Math.PI, 0, false);
    49.                 ctx.strokeStyle = colors[i];
    50.                 ctx.lineWidth = 20;
    51.                 ctx.stroke();
    52.             }
    53.  
    54.             // 绘制云朵
    55.             function drawCloud(x, y, size) {
    56.                 ctx.beginPath();
    57.                 ctx.arc(x, y, size, 0, Math.PI * 2);
    58.                 ctx.arc(x + size, y - size / 2, size * 0.8, 0, Math.PI * 2);
    59.                 ctx.arc(x + size * 2, y, size, 0, Math.PI * 2);
    60.                 ctx.fillStyle = 'white';
    61.                 ctx.fill();
    62.             }
    63.  
    64.             drawCloud(50, 50, 30);
    65.             drawCloud(canvas.width - 100, 80, 25);
    66.         }
    67.  
    68.         drawRainbow();
    69.     script>
    70. body>
    71. html>
    72.

    下免改进云彩代码，让云彩从左向右不停地移动。源码如下：

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>彩虹与移动的云朵title>
    7.     <style>
    8.         body {
    9.             display: flex;
    10.             justify-content: center;
    11.             align-items: center;
    12.             height: 100vh;
    13.             margin: 0;
    14.             background-color: #F0FFFF; /* 青白色背景 */
    15.         }
    16.         canvas {
    17.             border: 2px solid #000;
    18.             background-color: #87CEEB; /* 天蓝色 */
    19.         }
    20.     style>
    21. head>
    22. <body>
    23.     <canvas id="rainbowCanvas" width="400" height="300">canvas>
    24.  
    25.     <script>
    26.         // 获取canvas元素和2D绘图上下文
    27.         const canvas = document.getElementById('rainbowCanvas');
    28.         const ctx = canvas.getContext('2d');
    29.  
    30.         // 定义云朵对象数组，每个云朵包含位置、大小和速度信息
    31.         const clouds = [
    32.             { x: 50, y: 50, size: 30, speed: 0.5 },
    33.             { x: canvas.width - 100, y: 80, size: 25, speed: 0.3 }
    34.         ];
    35.  
    36.         // 绘制彩虹的函数
    37.         function drawRainbow() {
    38.             const centerX = canvas.width / 2;
    39.             const centerY = canvas.height;
    40.             const radius = canvas.height * 0.8;
    41.  
    42.             // 定义彩虹的颜色数组
    43.             const colors = [
    44.                 '#FF0000', // 红
    45.                 '#FF7F00', // 橙
    46.                 '#FFFF00', // 黄
    47.                 '#00FF00', // 绿
    48.                 '#0000FF', // 蓝
    49.                 '#4B0082', // 靛
    50.                 '#9400D3'  // 紫
    51.             ];
    52.  
    53.             // 从外到内绘制彩虹的每一道颜色
    54.             for (let i = colors.length - 1; i >= 0; i--) {
    55.                 ctx.beginPath();
    56.                 ctx.arc(centerX, centerY, radius - i * 20, Math.PI, 0, false);
    57.                 ctx.strokeStyle = colors[i];
    58.                 ctx.lineWidth = 20;
    59.                 ctx.stroke();
    60.             }
    61.         }
    62.  
    63.         // 绘制单个云朵的函数
    64.         function drawCloud(x, y, size) {
    65.             ctx.beginPath();
    66.             // 绘制三个部分组成的云朵形状
    67.             ctx.arc(x, y, size, 0, Math.PI * 2);
    68.             ctx.arc(x + size, y - size / 2, size * 0.8, 0, Math.PI * 2);
    69.             ctx.arc(x + size * 2, y, size, 0, Math.PI * 2);
    70.             ctx.fillStyle = 'white';
    71.             ctx.fill();
    72.         }
    73.  
    74.         // 更新云朵位置的函数
    75.         function updateClouds() {
    76.             clouds.forEach(cloud => {
    77.                 // 移动云朵
    78.                 cloud.x += cloud.speed;
    79.                 // 如果云朵完全移出画布右侧，将其移回左侧
    80.                 if (cloud.x > canvas.width + cloud.size * 2) {
    81.                     cloud.x = -cloud.size * 2;
    82.                 }
    83.             });
    84.         }
    85.  
    86.         // 主绘制函数，用于动画循环
    87.         function draw() {
    88.             // 清除整个画布
    89.             ctx.clearRect(0, 0, canvas.width, canvas.height);
    90.             // 绘制彩虹
    91.             drawRainbow();
    92.             // 绘制所有云朵
    93.             clouds.forEach(cloud => drawCloud(cloud.x, cloud.y, cloud.size));
    94.             // 更新云朵位置
    95.             updateClouds();
    96.             // 请求下一帧动画
    97.             requestAnimationFrame(draw);
    98.         }
    99.  
    100.         // 开始动画循环
    101.         draw();
    102.     script>
    103. body>
    104. html>

    其中，requestAnimationFrame 是一个现代浏览器提供的用于优化动画性能的 JavaScript 方法，来创建平滑的动画。它允许您告诉浏览器您希望执行一个动画，并请求浏览器在下一次重绘之前调用指定的函数来更新动画。这个方法的主要目的是为了创建更加流畅和高效的动画。使用方法：

    function animate() {
        // 更新动画状态
        // ...

        // 请求下一帧
        requestAnimationFrame(animate);
    }

    // 开始动画循环
    animate();

  • 相关阅读:
    安卓RecycleView包含SeekBar点击列表底部圆形阴影处理
    PostgreSQL数据库高级sql总结2
    JAVA8接口使用问题
    Vue 3的革命性新特性：深入了解Composition API
    基于Vue3在线商城（Vue3+VueCLI+VueRouter+vuex+axios+Bootstrap）
    无刷电机FOC硬件方案
    STM32-遥感数据处理
    8.10 - 软件运维
    MegLab 新能力“老番动漫超画质”上线，支持渣画质一键焕新
    56、springboot ------ RESTful服务及RESTful接口设计
  • 原文地址：https://blog.csdn.net/cnds123/article/details/141086789