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对图片进行旋转移动等操作一次