多个canvas画布合并_使用Canvas API实现环境画布背景动画实例

今天我们将探索一些环境网页背景动画。这里的想法是创建一个有趣的动画集合，而不会(过于)分散注意力，并且可以很容易地应用于网页的背景。每个动画都是使用带有Canvas API的vanilla(es6 +)JavaScript创建的，而5个中的3个使用Jonas Wagner的Simplex Noise库。在文章的最后，提供了本文讲述的Demo的演示地址。

我在每个演示中使用了一些有用的技术来提高运行效率。

一个是屏幕外绘图或缓冲。我们的想法是拥有一个内存中的画布和上下文来处理所有复杂的绘图，以及一个用于在渲染循环中绘制每个新帧的屏幕画布。该技术还允许多次重新绘制相同的参考帧，这可以与滤波和合成技术组合以创建一些有趣的效果。

例：

function render() {

ctx.onscreen.drawImage(canvas.offscreen, 0, 0); // render offscreen canvas to onscreen

}

function draw() {

ctx.offscreen.fillStyle = 'hsla(220,50%,50%,1)';

ctx.offscreen.fillRect(0, 0, canvas.offscreen.width, canvas.offscreen.height); // fill offscreen canvas background

// draw objects to offscreen canvas here

render();

window.requestAnimationFrame(draw);

}

我使用的另一种技术是将所有复杂对象的属性降低为单个数组。