Javascript 在fabric.js中优化性能

我正在写一个小程序来制作一个有趣的背景纹理。它的工作方式我希望它除了一件事，它是非常缓慢/起伏的电脑和手机上，它甚至没有显示动画。我想知道是否有更好的方法来实现我正在尝试的目标

当圆的大小很小或屏幕很大（创建许多对象）时，起伏变得特别糟糕

这是小提琴：

var canvas=newfabric.StaticCanvas（'c'））
var height=window.innerHeight
var width=window.innerWidth
变量大小=35
var strokeWidth=2
var strokeColor='#c9db8e'
变量填充='透明'
变量x=0
变量y=0
变量组=[]
canvas.setHeight（高度）
canvas.setWidth（宽度）
而（y给你！
首先，startAngle、endAngle的用法很好

其次，主要问题是触发每个动画的渲染。如果有100个组，canvas/js无法在短时间内（16毫秒）容纳100个动画

本例中的解决方案是使
.animate
使动画工作（因此只需更改角度），并且在onChange函数中完全不执行任何操作

然后以相同的持续时间启动一个动画，使onChange函数成为renderAll

如果您使用了
requestRenderAll
，如果已经请求了另一个渲染，则不会执行任何操作，那么在最新的beta版本中，这个问题将自动得到解决，但我建议您始终采取谨慎的方法，在必要时启动
renderAll


var canvas=newfabric.StaticCanvas（'c'））
var height=window.innerHeight
var width=window.innerWidth
变量大小=50
var strokeWidth=2
var strokeColor='#c9db8e'
变量填充='透明'
变量x=0
变量y=0
变量组=[]
canvas.setHeight（高度）
canvas.setWidth（宽度）
而（y给你！
首先，startAngle、endAngle的用法很好

其次，主要问题是触发每个动画的渲染。如果有100个组，canvas/js无法在短时间内（16毫秒）容纳100个动画

本例中的解决方案是使
.animate
使动画工作（因此只需更改角度），并且在onChange函数中完全不执行任何操作

然后以相同的持续时间启动一个动画，使onChange函数成为renderAll

如果您使用了
requestRenderAll
，如果已经请求了另一个渲染，则不会执行任何操作，那么在最新的beta版本中，这个问题将自动得到解决，但我建议您始终采取谨慎的方法，在必要时启动
renderAll


var canvas=newfabric.StaticCanvas（'c'））
var height=window.innerHeight
var width=window.innerWidth
变量大小=50
var strokeWidth=2
var strokeColor='#c9db8e'
变量填充='透明'
变量x=0
变量y=0
变量组=[]
canvas.setHeight（高度）
canvas.setWidth（宽度）
而
var canvas = new fabric.StaticCanvas('c')
var height = window.innerHeight
var width = window.innerWidth
var size = 35
var strokeWidth = 2
var strokeColor = '#c9db8e'
var fill = 'transparent'
var x = 0
var y = 0
var groups = []

canvas.setHeight(height)
canvas.setWidth(width)

while(y <= (height + (size*2))){
    while(x <= (width + (size*2))){
    var rotation = 0
    switch(Math.floor(Math.random()*4)){
        case 1: rotation = 90; break;
    }

    var first = new fabric.Circle({
      left: 0,
      top: 0,
      radius: size,
      startAngle: 0,
      endAngle: Math.PI/2,
      fill: fill,
      strokeWidth: strokeWidth,
      stroke: strokeColor
    });    
    var second = new fabric.Circle({
        left: size *2 ,
      top: size*2,
      radius: size,
      startAngle: Math.PI,
      endAngle: -Math.PI/2,
      fill: fill,
      strokeWidth: strokeWidth,
      stroke: strokeColor
    });

    var group = new fabric.Group([ first, second ], {
      left: x - size,
      top: y - size,
      originX: 'center',
      originY: 'center',
      angle : rotation
    });

    groups.push(group)
    x += size * 2
  }
  x = 0
    y += size * 2
}

function draw(){
    groups.forEach(function(g){
    canvas.add(g)
  })
}

draw()

setInterval(function(){
    groups.forEach(function(g){
    var rotation = g.get('angle')
    switch(Math.floor(Math.random()*32)){
        case 1: rotation = '+=90'; break;
        case 1: rotation = '-=90'; break;
    }
    g.animate('angle', rotation, {
      onChange: canvas.renderAll.bind(canvas),
      duration: 250,
      easing: fabric.util.ease.easeOut
    });
  })
}, 800)