HTML5+JavaScript绘制彩虹和云朵

学习&实践爱好者

于 2024-08-10 15:00:00 发布

阅读量121

点赞数 1

分类专栏： JavaScrip技术 HTML5与CSS3 前端开发文章标签： html5 javascript 前端

本文链接：https://blog.csdn.net/cnds123/article/details/141086789

版权

JavaScrip技术同时被 3 个专栏收录

129 篇文章 24 订阅

订阅专栏

HTML5与CSS3

79 篇文章 15 订阅

订阅专栏

前端开发

66 篇文章 4 订阅

订阅专栏

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