canvas是HTMl5中的重要标签之一，它可以在浏览器中绘制图形。canvas标签需要指定一个宽度和高度。
本文将包括以下内容：
1.准备canvas
2.绘制大海
3.动态效果制作
1、准备canvas
Bash
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d'); 其中，canvas为元素的ID，getContext('2d')则获取canvas的2D渲染上下文。
2、绘制大海
我们需要绘制一张静态的大海背景。我们可以使用canvas的绘制API来实现，如下：
Bash
context.fillStyle = 'rgba(46, 113, 245, 1)'; // 设定填充颜色为蓝色
context.fillRect(0, 0, canvas.width, canvas.height); // 绘制一个填充满整个canvas的矩形 上述代码中，我们使用fillStyle属性来设置填充颜色，使用fillRect方法来绘制矩形，矩形的位置大小由canvas的宽高决定。
我们需要在大海中绘制一些波浪线，可以使用二次贝塞尔曲线来绘制。具体实现如下：
context.beginPath(); // 开始一条新路径
context.lineWidth = 2; // 设定线宽为2
context.strokeStyle = 'rgba(255, 255, 255, 0.3)'; // 设定描边样式
context.moveTo(-200, canvas.height - 50); // 移动到起始点
for (let i = 0; i < canvas.width + 200; i += 50) {
context.quadraticCurveTo(i + 25, canvas.height - 80, i + 50, canvas.height - 50); // 绘制二次贝塞尔曲线
}
context.stroke(); // 描边 我们先使用beginPath方法开始一条新的路径，再使用moveTo方法移动到起始点。之后使用for循环区分每一个波浪线段，使用quadraticCurveTo方法绘制二次贝塞尔曲线，并描边。
3、动态效果制作
在上面绘制静态的大海背景后，我们需要为其添加动态效果，其中最重要的是大海的波动效果。
在让大海动起来之前，需要制作出波浪的感觉。我们可以使用一个数组来记录每个波浪的高度，随着时间改变每个波浪的高度并绘制画布，造成波动的效果。代码如下：
const waves = [];
for (let i = 0; i < 5; i++) {
waves.push({
amplitude: Math.random() * 50 + 50, // 振幅
frequency: Math.random() * 0.03 + 0.02, // 频率
offsetX: Math.random() * Math.PI * 2, // 初始位移
offsetY: Math.random() * canvas.height / 2 + canvas.height / 2 // 初始高度
});
}
function draw() {
// 清除画布
context.clearRect(0, 0, canvas.width, canvas.height);
// 绘制背景
context.fillStyle = 'rgba(46, 113, 245, 1)';
context.fillRect(0, 0, canvas.width, canvas.height);
// 绘制波浪
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = 'rgba(255, 255, 255, 0.3)';
context.moveTo(-200, canvas.height - 50);
for (let i = 0; i < canvas.width + 200; i += 50) {
const angle = i * waves[0].frequency + waves[0].offsetX; // 计算角度
const y = Math.sin(angle) * waves[0].amplitude + waves[0].offsetY; // 计算波浪高度
context.quadraticCurveTo(i + 25, y - 30, i + 50, canvas.height - 50);
}
context.stroke();
// 更新波浪位移
waves.forEach(wave => {
wave.offsetX += 0.1;
});
requestAnimationFrame(draw); // 不断重绘
}
draw(); 在上述代码中，我们首先定义了一个waves数组，其中包括每个波浪的振幅、频率、初始位移和初始高度。在绘制每个波浪时，我们根据sin函数来计算波浪高度，进而绘制出波浪曲线。同时，我们也不断更新每个波浪的位置，通过requestAnimationFrame函数来不断重绘大海的效果，从而形成波动的效果。
希望本文能够对您有所帮助，感谢您的阅读！
人人为我，我为人人，谢谢您的浏览，我们一起加油吧。
