canvas是HTMl5中的重要标签之一，它可以在浏览器中绘制图形。canvas标签需要指定一个宽度和高度。

本文将包括以下内容：

1.准备canvas

2.绘制大海

3.动态效果制作

1、准备canvas

<canvas id="canvas" style="width:100%;height:300px;"></canvas>

const canvas = document.getElementById('canvas');  
const context = canvas.getContext('2d');  

其中，canvas为元素的ID，getContext('2d')则获取canvas的2D渲染上下文。

2、绘制大海

我们需要绘制一张静态的大海背景。我们可以使用canvas的绘制API来实现，如下：

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函数来不断重绘大海的效果，从而形成波动的效果。

希望本文能够对您有所帮助，感谢您的阅读！

人人为我，我为人人，谢谢您的浏览，我们一起加油吧。

Tags：canvas beginpath

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。