uniapp 如何实现canvas动画

1. 什么是UniApp？

UniApp是一款基于Vue.js框架开发的跨平台开发框架，能够快速开发出支持多个平台（如微信小程序、H5、App等）的应用程序。它采用了一套代码多端运行的解决方案，使得开发者无需编写多个版本的代码，可以省去繁琐的平台适配工作。

UniApp的核心理念是“一次开发，多端运行”，大幅提高了开发效率和用户体验。

2. 什么是Canvas？

Canvas是HTML5提供的用于绘制图形的API，它可以通过JavaScript在HTML页面上绘制出各种复杂的图形。

Canvas的特点：

基于状态机模型

不建议频繁修改状态

不支持事件模型

不支持DOM操作，如：appendChild、insertBefore等

3. UniApp如何使用Canvas？

3.1 在Vue模板中引入Canvas组件

在Vue的模板文件中，我们可以通过<canvas>标签引入Canvas组件，然后通过id绑定Canvas的实例对象：

  // 在template中引入Canvas组件
  <canvas id="canvas" ref="canvas" width="500" height="500"></canvas>
  
  // 在script中通过$refs获取Canvas的实例对象
  export default {
    mpType: 'page',
    mounted() {
      // 获取canvas实例对象
      this.canvas = this.$refs.canvas
    }
  }

通过id获取Canvas的实例对象，我们就可以开始在Canvas上进行绘制操作了。

3.2 设置Canvas上下文类型

在Canvas中，我们需要根据不同的应用场景选择不同类型的上下文（CanvasRenderingContext2D）。

在UniApp中，我们可以通过Canvas实例对象的getContext()方法获取指定类型的上下文对象。

  mounted() {
    // 获取canvas实例对象
    this.canvas = this.$refs.canvas
  
    // 设置canvas上下文类型
    this.ctx = this.canvas.getContext('2d')
  }

在getContext()方法中传入2d参数，即可得到Canvas 2D上下文对象。

3.3 Canvas绘制动画实例

下面是一个基于Canvas绘制的简单动画实例。该动画可以让一个椭圆形在Canvas中水平运动，直到触碰到Canvas边缘反弹。

  export default {
    mpType: 'page',
    mounted() {
      // 获取canvas实例对象
      this.canvas = this.$refs.canvas
      
      // 设置canvas上下文类型
      this.ctx = this.canvas.getContext('2d')
      
      // 椭圆位置、速度、大小、颜色等参数
      let x = this.canvas.width/2 - 30;
      let y = 0;
      let vx = 5;
      let vy = 1;
      let radius_x = 30;
      let radius_y = 10;
      let color = "blue";
      
      // 定义动画方法
      const draw = () => {
        // 绘制椭圆形
        this.ctx.beginPath();
        this.ctx.ellipse(x, y, radius_x, radius_y, 0, 0, Math.PI*2);
        this.ctx.fillStyle = color;
        this.ctx.fill();
        this.ctx.closePath();
        
        // 更新椭圆形的位置
        x += vx;
        y += vy;
        if (x >= this.canvas.width-radius_x || x <= radius_x) {
          vx = -vx;
        }
        if (y >= this.canvas.height-radius_y || y <= radius_y) {
          vy = -vy;
        }
      }
      
      // 每隔10毫秒调用一次draw()方法
      setInterval(draw, 10);
    }
  }

该动画实现了椭圆形的水平运动，当触碰到Canvas边缘时反弹。

4. 总结

Canvas是一个很强大的绘图API，通过它我们可以实现各种复杂的动画效果。在UniApp中，我们可以通过Canvas组件和Canvas上下文对象来进行各种绘图操作。我们可以使用UniApp的一次开发、多端运行的特性，快速地将Canvas动画应用到多个平台中。