uniapp使用canvas绘制动画

1. 创建画布

在页面中添加一个canvas标签，并设置宽高属性：

<canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>

在JS文件中获取画布对象：

const ctx = uni.createCanvasContext('myCanvas');

2. 绘制动画

通过多次调用canvas的绘图方法来实现动画效果。

例如，可以绘制一个圆形，并通过改变圆心坐标和半径来实现动画效果：

let x = 100, y = 100, r = 50; // 初始圆心坐标和半径
function draw() {
  ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 清空画布
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fillStyle = '#ff0000';
  ctx.fill();
  
  x += 1; // 改变圆心坐标
  r += 0.5; // 改变半径
  
  if (x > canvasWidth + r) { // 判断动画是否结束
    return;
  }
  
  requestAnimationFrame(draw); // 递归调用绘制函数，实现动画效果
}
draw();

3. 动画优化

为了提高动画的流畅度和性能，可以采取以下优化措施：

- 避免频繁操作DOM，尽量减少对页面的影响；
- 使用requestAnimationFrame代替setTimeout和setInterval，提高动画的流畅度；
- 避免在绘制过程中频繁调用API，可以将多次绘制操作合并成一次操作，减少API调用次数；
- 避免频繁地清空画布，可以将上一次绘制的内容保留下来，只清空需要改变的部分。

例如，可以将上面的代码进行优化：

let x = 100, y = 100, r = 50; // 初始圆心坐标和半径
let lastX = 0, lastY = 0, lastR = 0; // 上一次绘制的圆心坐标和半径
function draw() {
  if (x > canvasWidth + r) { // 判断动画是否结束
    return;
  }
  
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fillStyle = '#ff0000';
  ctx.fill();
  
  lastX = x; // 保存当前圆心坐标和半径
  lastY = y;
  lastR = r;
  
  x += 1; // 改变圆心坐标和半径
  r += 0.5;
  
  requestAnimationFrame(() => {
    ctx.clearRect(lastX - lastR, lastY - lastR, lastR * 2, lastR * 2); // 只清空需要改变的部分
    draw(); // 递归调用绘制函数，实现动画效果
  });
}
draw();