微信开发者工具使用echarts,提示[pages/shuju/shuju] [Component] <canvas>: canvas 2d 接口支持同层渲染且性能更佳，建议切换使用。这个需要怎么切换？请给出示例代码

这个提示是在使用 canvas 时，微信开发者工具建议使用同层渲染来提升性能。同层渲染的方式是将多个 canvas 元素放在同一个层级下，这样可以减少元素的层级关系，提高页面渲染效率。下面是一个示例代码：

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

const ctx1 = wx.createCanvasContext('canvas1');
const ctx2 = wx.createCanvasContext('canvas2');
const ctx3 = wx.createCanvasContext('canvas3');

// 绘制 canvas1
ctx1.setFillStyle('red');
ctx1.fillRect(0, 0, 100, 100);

// 绘制 canvas2
ctx2.setFillStyle('green');
ctx2.fillRect(0, 0, 100, 100);

// 绘制 canvas3
ctx3.setFillStyle('blue');
ctx3.fillRect(0, 0, 100, 100);

// 将三个 canvas 放在同一个层级下
wx.createSelectorQuery().select('#canvas1').fields({
  node: true,
  size: true
}).exec((res) => {
  const canvas = res[0].node;
  const width = res[0].width;
  const height = res[0].height;
  const context = canvas.getContext('2d');

  // 设置同层渲染
  context.setTransform(1, 0, 0, 1, 0, 0);
  context.clearRect(0, 0, width, height);
  context.drawCanvas(canvas, 0, 0, width, height);
  context.drawCanvas('canvas2', 0, 0, width, height);
  context.drawCanvas('canvas3', 0, 0, width, height);
});

上面的代码中，我们创建了三个 canvas 元素，并分别在每个 canvas 上绘制了一个颜色块。然后使用 `wx.createSelectorQuery()` 方法获取到第一个 canvas 元素，并将三个 canvas 放在同一个层级下，从而实现同层渲染。