canvas 层级

Canvas 层级

在使用 HTML5 的 canvas 元素时，有时需要管理多个绘制层，比如背景、前景和交互元素等。为了解决这个问题，可以采用多 canvas 技术，即将不同的图形元素绘制在不同的 canvas 上，然后通过 CSS 将它们堆叠在一起。

解决方案

通过创建多个 canvas 元素，并利用 CSS 的 z-index 属性来控制它们的层级关系，从而实现分层绘制的效果。每个 canvas 可以专注于特定类型的绘图任务，例如一个用于背景，另一个用于动态内容。

方法一：多 Canvas 分层

创建多个 canvas 元素，并通过 CSS 设置它们的位置和层级。

html</p>

<div style="position: relative">
  
  
</div>

<p>

然后，在 JavaScript 中分别获取这些 canvas 的上下文并进行绘制。

javascript
const bgCanvas = document.getElementById('background');
const fgCanvas = document.getElementById('foreground');</p>

<p>const bgCtx = bgCanvas.getContext('2d');
const fgCtx = fgCanvas.getContext('2d');</p>

<p>// 绘制背景
bgCtx.fillStyle = 'lightblue';
bgCtx.fillRect(0, 0, 500, 500);</p>

<p>// 绘制前景
fgCtx.fillStyle = 'red';
fgCtx.font = '30px Arial';
fgCtx.fillText('Hello, World!', 50, 50);

方法二：单 Canvas 分层模拟

如果不想使用多个 canvas 元素，也可以通过单个 canvas 模拟分层效果。通过保存和恢复画布状态（save 和 restore 方法），可以在同一 canvas 上实现类似分层的效果。

javascript
const canvas = document.getElementById('singleCanvas');
const ctx = canvas.getContext('2d');</p>

<p>// 绘制背景层
ctx.save();
ctx.fillStyle = 'lightgreen';
ctx.fillRect(0, 0, 500, 500);
ctx.restore();</p>

<p>// 绘制前景层
ctx.save();
ctx.fillStyle = 'blue';
ctx.font = '40px sans-serif';
ctx.fillText('Single Canvas Layer', 30, 100);
ctx.restore();

方法三：使用 WebGL 实现复杂分层

对于更复杂的场景，可以考虑使用 WebGL。WebGL 提供了更强的图形处理能力，适合处理多层次、高性能的图形渲染。

javascript
// 初始化 WebGL 上下文
const glCanvas = document.getElementById('webglCanvas');
const gl = glCanvas.getContext('webgl');</p>

<p>if (!gl) {
  console.error('WebGL not supported.');
}</p>

<p>// 简单的着色器代码省略...

以上三种方法可以根据具体需求选择合适的实现方式。多 canvas 方法简单直观，适合大多数情况；单 canvas 方法节省资源，适合轻量级应用；WebGL 则适用于需要高性能渲染的场景。