首页 前端知识 HTML5 JavaScript绘制彩虹和云朵

HTML5 JavaScript绘制彩虹和云朵

2024-08-23 20:08:33 前端知识 前端哥 149 35 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16641.html
标签
评论
发布的文章

HTML5 基本框架

2024-09-01 23:09:50

HTML5取消边框的方法

2024-09-01 23:09:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!