Canvas画图动态渐变波浪

罗罗诺亚D路飞

于 2024-04-16 13:51:58 发布

阅读量135

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_72923430/article/details/137822504

版权

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            padding: 0;
            margin: 0;
            overflow: hidden;
            background-image: linear-gradient(to left, #00a2ff, #68de86);
        }

        canvas {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>

<body>
    <canvas id="myCanvas"></canvas>
    <script>
        var num = -1

        // 获取Canvas元素和2D渲染上下文对象
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        // 定义波浪的属性
        var wave = {
            y: canvas.height / 2, // 波浪的中心位置
            length: 0.04, // 波浪的长度
            amplitude: 60, // 波浪的振幅
            frequency: 0.0003 // 波浪的频率
        };
        // 创建线性渐变对象并添加颜色停止点
        var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
        gradient.addColorStop(0, "#00a2ff");
        gradient.addColorStop(1, "#68de86");
        // 绘制波浪的函数
        function drawWave() {
            // 使用requestAnimationFrame实现动画效果
            requestAnimationFrame(drawWave);
            // 清除画布上的任何内容
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // 开始绘制路径
            ctx.beginPath();
            // 将路径的起点移动到波浪的中心位置
            ctx.moveTo(0, wave.y);
            // 遍历整个画布的宽度，计算每个点的x坐标和y坐标，并将路径连接到该点
            for (var i = 0; i < canvas.width; i++) {
                // 将当前循环的索引值赋给变量x
                var x = i;
                // 根据波浪的属性计算y坐标的值
                var y = wave.y + wave.amplitude * Math.sin(x * wave.length + wave.frequency * Date.now());
                y = y + (x * Math.sin(wave.length + wave.frequency * Date.now()));
                // 将当前点与下一个点的连线添加到路径中
                ctx.lineTo(x, y);
            }
            // 将路径闭合
            ctx.lineTo(canvas.width, canvas.height);
            ctx.lineTo(0, canvas.height);
            ctx.closePath();
            // 设置填充样式为渐变对象，并填充路径
            ctx.fillStyle = gradient;
            ctx.fill();
        }
        // 调用drawWave函数开始绘制波浪动画
        drawWave();

    </script>
</body>

</html>