微信小程序 Canvas增强组件实例详解及源码分享

什么是Canvas增强组件

Canvas增强组件是微信小程序提供的一个可以在页面上绘制图形的组件，与普通的canvas组件相比，它具有更加轻量、高性能、易用的特点。Canvas增强组件使用 WebGL 技术实现，可以在小程序中流畅地绘制复杂的图形，例如3D模型等。

如何使用Canvas增强组件

在小程序中使用Canvas增强组件，需要在 wxml 文件中引入 canvas-3d 组件，并在对应的 js 文件中创建一个 canvas-3d 的对象，并将其添加到页面上。

<canvas-3d id="canvas"></canvas-3d>

const canvas3d = new Canvas3D('canvas')

Canvas增强组件实例

下面我们使用 Canvas增强组件 实现一个简单的 3D 魔方。

示例一：绘制一个红色的立方体

首先我们创建一个立方体的模型，定义每个面的颜色及顶点坐标。

const vertices = [
  [-1, -1,  1], [1, -1,  1], [1,  1,  1], [-1,  1,  1], // 前面
  [-1, -1, -1], [-1,  1, -1], [1,  1, -1], [1, -1, -1], // 后面
  [-1,  1, -1], [-1,  1,  1], [1,  1,  1], [1,  1, -1], // 上面
  [-1, -1, -1], [1, -1, -1], [1, -1,  1], [-1, -1,  1], // 下面
  [-1,  1,  1], [-1, -1,  1], [-1, -1, -1], [-1,  1, -1], // 左面
  [1, -1, -1], [1,  1, -1], [1,  1,  1], [1, -1,  1] // 右面
]

const colors = [
  [1, 0, 0], [1, 0, 0], [1, 0, 0], [1, 0, 0], // 前面
  [0, 1, 0], [0, 1, 0], [0, 1, 0], [0, 1, 0], // 后面
  [0, 0, 1], [0, 0, 1], [0, 0, 1], [0, 0, 1], // 上面
  [0, 1, 1], [0, 1, 1], [0, 1, 1], [0, 1, 1], // 下面
  [1, 0, 1], [1, 0, 1], [1, 0, 1], [1, 0, 1], // 左面
  [1, 1, 0], [1, 1, 0], [1, 1, 0], [1, 1, 0] // 右面
]

const indices = [
  0, 1, 2, 0, 2, 3, // 前面
  4, 5, 6, 4, 6, 7, // 后面
  8, 9, 10, 8, 10, 11, // 上面
  12, 13, 14, 12, 14, 15, // 下面
  16, 17, 18, 16, 18, 19, // 左面
  20, 21, 22, 20, 22, 23 // 右面
]

然后，我们绘制这个立方体。

canvas3d.clear() // 清空画布

canvas3d.addModel(vertices, colors, indices) // 添加模型

canvas3d.setModelMatrix(rotateX(30), rotateY(45)) // 设置模型矩阵

canvas3d.render() // 渲染画布

示例二：实现立方体旋转动画

接下来，我们添加旋转动画。

let rotateXAngle = 0
let rotateYAngle = 0

function rotate() {
  rotateXAngle += 1
  rotateYAngle += 1
  // 更新模型矩阵
  canvas3d.setModelMatrix(rotateX(rotateXAngle), rotateY(rotateYAngle))
  // 渲染画布
  canvas3d.render()
  // 不断执行旋转动画
  requestAnimationFrame(rotate)
}

// 开始执行旋转动画
rotate()

源码分享

详细源码请查看 GitHub，包含了立方体、球体、环面等样例。