Canvas 绘制大量点（40万个）的时候，耗费时间太长怎么解决？？

Question

上面的画布：宽800，高500我打算绘制： 800 * 500 = 40万个随机坐标的白点然后 60fps 刷新，做一个 视频加载失败后的动画效果....结果：就单绘制一次 都会导致浏览器卡一阵子，更不用说动画效果了。怎么解决？？    // 绘制点     _drawPoint: function(x , y , r , pointColor){       var startAngle = 0;       var endAngle = getRad(360);       this._ctx.beginPath();       this._ctx.arc(x , y , r , startAngle , endAngle , false);       this._ctx.fillStyle = pointColor;       this._ctx.fill();       this._ctx.closePath();     } ,     _draw: function(){        // 初始化画布        this._setCssStyle();        // 绘制点        var pointNum = this._cavW * this._cavH;        var pointR = 0.5;        var pointFillColor = '#222222';        for (var i = 1; i <= pointNum; ++i)         {           var x = random(0 , this._cavW);           var y = random(0 , this._cavH);           this._drawPoint(x , y , pointR , pointFillColor);         }     } ,

Answer 1

直接用gif图片，或者用静态图片。然后每60fps对图片进行旋转移动等操作一次