小程序和H5中canvas卡顿的性能优化方向和实践

什么是CANVAS? 首先介绍下canvas， 前端的同学可能很熟悉，举个很简单的例子，
平常用的网页截图、H5游戏、前端动效、可视化图表…,都有canvas 的应用场景， 官方的定义：
canvas是HTML5提供的一种新标签,
ie9才开始支持的，canvas是一个矩形区域的画布，可以用JS控制每一个像素在上面绘画。canvas 标签使用 JavaScript
在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
看着很简单，其实canvas这个标签的加入，赋予了我们更多创建惊艳的前端效果的能力。但是你知道他也有性能问题？？本篇文章就简单谈一谈canvas的性能优化。

哪些因素会影响canvas的性能

canvas优化的几种方式

我们都知道浏览器上渲染动画 每一秒高达60帧，也就是1秒钟内我们完成60次图像绘制， 也就是每一帧图像的绘制时间其实就是（1000/ 60)。 如果在每一帧动画的时间小于 16.7 ms 辣么就会出现卡顿、丢帧。而canvas 其实是一个指令式绘图系统， 他通过绘图指令来完成绘图操作。
影响canvas两个很关键的因素：
第一个渲染的图形数量多，就是调用绘图指令的次数比较多，
第二个渲染的图形大，就是一次绘图渲染的时间比较长

优化canvas

1. 减少绘图指令的调用

这句话怎么理解呢 ， 假设你要在场景中画正n变形，这是一个 很常见的需求可能你稍不注