HTML5代码如何实现波浪效果 HTML5代码Canvas路径绘制的原理

const canvas = document.getElementById('waveCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 400;
<p>let offset = 0;</p><p>function drawWave() {
ctx.clearRect(0, 0, canvas.width, canvas.height);</p><p>ctx.beginPath();
ctx.moveTo(0, canvas.height / 2);</p><p>for (let x = 0; x <= canvas.width; x += 10) {
const y = canvas.height / 2 + Math.sin((x / 50) + offset) * 50;
ctx.lineTo(x, y);
}</p><p>ctx.strokeStyle = '#00bfff';
ctx.lineWidth = 3;
ctx.stroke();</p><p>offset += 0.1; // 更新相位，制造移动效果
requestAnimationFrame(drawWave);
}</p><p>drawWave();</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1171">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680100074536.png" alt="Vinteo AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1171">Vinteo AI</a>
                            <p>利用人工智能在逼真的室内环境中创建产品可视化。无需设计师和产品照片拍摄</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Vinteo AI">
                                <span>62</span>
                            </div>
                        </div>
                        <a href="/ai/1171" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Vinteo AI">
                        </a>
                    </div>
                

const y1 = Math.sin((x / 50) + offset) * 50;
const y2 = Math.sin((x / 30) - offset) * 20;
const y = canvas.height / 2 + y1 + y2;