小程序和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变形，这是一个 很常见的需求可能你稍不注意写下了下面这几行代码：

function drawAnyShape(points) {
   
      for(let i=0; i<points.length; i++) {
   
            const p1 = points[i]
            const p2 =  i=== points.length - 1 ? points[0] : points[i+1]
            ctx.fillStyle = 'black'
            ctx.beginPath();
            ctx.moveTo(...p1)
            ctx.lineTo(...p2)
            ctx.closePath();
            ctx.stroke()
      }
   }

​
points 对应的生成多边形的点，代码如下：

 function  generatePolygon(x,y,r, edges = 3) {
   
      const points = []
      const detla = 2* Math.PI / edges;
      for(let i= 0;i<edges;i++) {
   
          const theta = i * detla;
          points.push([x+ r * Math.sin(theta), y + r * Math.cos(theta)])
      }
      return points 
  }

​
一看这fps低成这个样子，很多人这时候说，你画的图形多，那我只要悄悄的改下代码，就