vue3中使用canvas绘制波浪

<template>

    <div class="content">

        <!-- canvas 元素，绑定 ref -->

        <canvas class="wave_canvas" ref="waveCanvas"></canvas>

    </div>

</template>

<script setup lang="ts">

const waveCanvas = ref<any>(null);

onMounted(() => {

    const canvas = waveCanvas.value;

    const ctx = canvas.getContext("2d");

    // 设置 canvas 的尺寸为全屏

    canvas.width = window.innerWidth;

    canvas.height = 200;

    const waveParams1 = {

        amplitude: 60, // 第一层波浪的振幅

        frequency: 0.004, // 第一层波浪的频率

        speed: 0.01, // 第一层波浪的速度

        offset: 4.5, // 第一层波浪的偏移量

    };

    const waveParams2 = {

        amplitude: 40, // 第二层波浪的振幅

        frequency: 0.004, // 第二层波浪的频率

        speed: 0.01, // 第二层波浪的速度

        offset: Math.PI / 3, // 第二层波浪的偏移量，让它们错开

    };

    function drawWave(waveParams: any, color: any) {

        ctx.fillStyle = color;

        ctx.beginPath();

        // 从画布的左边开始绘制波浪

        for (let x = 0; x < canvas.width; x++) {

            const y =

                canvas.height -

                waveParams.amplitude *

                    Math.sin(x * waveParams.frequency + waveParams.offset);

            if (x === 0) {

                ctx.moveTo(x, y); // 起始点

            } else {

                ctx.lineTo(x, y); // 连续的波浪曲线

            }

        }

        ctx.lineTo(canvas.width, canvas.height); // 右下角

        ctx.lineTo(0, canvas.height); // 左下角

        ctx.closePath();

        ctx.fill();

    }

    function animate() {

        ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布

        // 绘制两层波浪

        drawWave(waveParams1, "rgba(255, 255, 255, 0.6)"); // 第一层波浪的颜色

        drawWave(waveParams2, "rgba(255, 255, 255, 1)"); // 第二层波浪的颜色

        // 动态更新偏移量，产生波动效果

        waveParams1.offset += waveParams1.speed;

        waveParams2.offset += waveParams2.speed;

        requestAnimationFrame(animate); // 启动下一帧动画

    }

    animate(); // 启动动画

});

</script>

<style scoped>

.wave_canvas {

    display: block;

    width: 100vw;

}

</style>