小程序的旧版 canvascontext 相关 api 已经不再维护，本指南主要介绍迁移至新版 canvas 2d 的操作方法。

特性差异

新版 canvas api 对齐 web 标准：

• canvasrendercontext2d 实现了 ，api 列表及文档请参考 。
• webglrenderingcontext 实现了 ，api 列表及文档请参考 。

使用限制

新版 canvas api 需要基础库 2.7.0 或更高版本。canvas.totempfilepath 需要基础库 或更高版本，支付宝客户端 10.2.38 或更高版本。 若版本较低，建议采取 兼容处理。

迁移步骤

修改 axml

新版 api 的 type 为必填属性。

  <canvas id="my-canvas">canvas>
  
  
  <canvas id="my-canvas" type="2d" onready="oncanvasready">canvas>
  

修改 canvascontext 获取方法

旧版 canvas 接口使用 my.createcanvascontext 同步获取 canvascontext。
新版 canvas 2d 接口需要先通过 selectorquery 获取 canvas 对象，再通过 canvas.getcontext 获取渲染上下文 renderingcontext。

// 旧版
  page({
      onload() {
          const context = my.createcanvascontext('my-canvas');
      }
  })
  // 改为如下新版
  page({
      oncanvasready() {
          my.createselectorquery()
              .select('#my-canvas')
              .node()
              .exec((res) => {
                  const canvas = res[0].node;
                  const context = canvas.getcontext('2d');
              });
      },
  });
  

修改绘制方法

旧版 canvas 接口需要调用 canvascontext.draw 后才会进行绘制，并且绘制过程是 异步 的，需要等待绘制完成回调才能进行下一步操作。
新版 canvas 2d 接口不再需要调用 draw 函数，所有绘制方法都会 同步 绘制到画布上。
注意：canvascontext.draw 函数第一个参数控制在绘制前是否保留上一次绘制（默认值为 false）。若在旧接口中设置为 false，则迁移至新接口后，需要在绘制前通过 clearrect 清空画布。

// 旧版
  // 若干绘制调用
  context.fillrect(0, 0, 50, 50)
  context.draw(false, () => {
      // 此时绘制完成
      console.log('draw done')
  })
  // 改为如下新版
  // 绘制前清空画布
  context.clearrect(0, 0, canvas.width, canvas.height)
  // 若干绘制调用
  context.fillrect(0, 0, 50, 50)
  // 此时绘制完成
  console.log('draw done')
  

修改图片绘制

旧版 canvas 接口 canvascontext.drawimage 直接传入图片 url。
新版 canvas 2d 接口需要先通过 canvas.createimage 创建图片对象，onload 图片加载完成回调触发后，再将图片对象传入 context.drawimage 进行绘制。

// 旧版
  const src = 'https://img.alicdn.com/tfs/tb1gvvmj2bntkjjy0fdxxcppvxa-520-280.jpg'
  context.drawimage(src, 2, 2, 250, 80);
  // 改为如下新版
  const img = canvas.createimage();
  img.src = "https://img.alicdn.com/tfs/tb1gvvmj2bntkjjy0fdxxcppvxa-520-280.jpg";
  img.onload = () => {
    context.drawimage(img, 10, 10, 100, 100);
  }
  

修改 totempfilepath

使用限制

canvas.totempfilepath 需要基础库 或更高版本，支付宝客户端 10.2.38 或更高版本。

// 旧版
  context.totempfilepath({
    success(res) {
      console.log(res.apfilepath);
    },
  });
  // 修改为如下新版
  canvas.totempfilepath({
    success(res) {
      console.log(res.apfilepath);
    },
  });