首页cavans模仿写出大海波浪的代码

cavans模仿写出大海波浪的代码

时间: 2023-07-03 18:21:35 浏览: 178

好的，以下是一个简单的HTML文件，它使用Canvas模拟绘制大海和波浪的效果。 ```html <!DOCTYPE html> <html> <head> <title>Canvas Wave Simulation</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 设置画布大小 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 大海颜色 const seaColor = '#0077be'; // 波浪颜色 const waveColor = '#00b8ff'; // 波浪速度 const waveSpeed = 0.05; // 波浪高度 const waveHeight = 100; // 波浪弯曲程度 const waveCurvature = 0.5; // 绘制大海 function drawSea() { ctx.fillStyle = seaColor; ctx.fillRect(0, 0, canvas.width, canvas.height); } // 绘制波浪 function drawWave(offset) { ctx.beginPath(); ctx.moveTo(0, canvas.height); for (let x = 0; x < canvas.width; x++) { const y = waveHeight * Math.sin(x * waveCurvature + offset); ctx.lineTo(x, canvas.height - y); } ctx.lineTo(canvas.width, canvas.height); ctx.closePath(); ctx.fillStyle = waveColor; ctx.fill(); } // 开始绘制动画 function animate() { drawSea(); drawWave(performance.now() * waveSpeed); requestAnimationFrame(animate); } // 开始绘制 animate(); </script> </body> </html> ``` 这是一个非常简单的实现，它使用正弦函数来模拟波浪效果。您可以通过调整waveHeight和waveCurvature参数来改变波浪的形状。同时，您也可以调整waveSpeed来改变波浪的速度。

阅读全文