@tuya-miniapp/miniapp-canvas v2.0.0

轻量的小程序 canvas 动画库

miniapp-canvas 是什么

canvas 是 HTML5 的一个重要元素，它能够高效的绘制图形，但是过于底层，且粗糙的 Api，导致开发者很难使用它来做较为复杂的图形， 而且它的即时绘制无记忆特性，使得它内部的图形并不支持动画更不支持一切交互事件。

这样的问题出现在所有支持 canvas 的客户端上同样出现在 智能小程序中的 canvas 中， 由于小程序由jsCore支持，并没有window 对象，并且 canvas 的 Api 与标准的 canvas 的 Api有所出入，所以市面上绝大部分 canvas 库与它无缘。

而 miniapp-canvas 也就应运而生，专门用于处理小程序上 canvas 的图形创建，图形动画，以及交互问题的。

特性

• 简单 不需要你会 canvas,会用 jQuery 就会使用 tyDraw。
• 灵活 所有图形，随时随地都可以进行属性修改、图形添加以及图形销毁。
• 事件支持 小程序支持的事件只要是合理的都支持。
• 缓动动画支持 tyDraw 支持链式调用动画『就像 jQuery 的 animate 一样』，并且支持几乎所有的缓动函数

如何使用

1. 安装

yarn add @tuya-miniapp/miniapp-canvas

2. 引入并使用

import { tyDraw, Shape } from '@tuya-miniapp/miniapp-canvas';

Page({
  onLoad: function () {
    var context = ty.createCanvasContext('rect');
    this.tyCanvas = new tyDraw(context, 0, 0, 400, 500);
    var rect = new Shape(
      'rect',
      { x: 150, y: 250, w: 80, h: 80, fillStyle: '#36BBA6' },
      'fill',
      true
    );
    this.tyCanvas.add(rect);
    rect.updateOption({ rotate: Math.PI / 4 });
  },
  onUnload: function () {
    this.tyCanvas.clear();
  },
});

完整文档参考这里