全幅キャンバスアニメーション

Question

にここで「キャンバス」のアニメーション で私を助けてくださいは例です：http://codepen.io/anon/pen/jqxVOR?editors=0010

は、どのように私は、ピクセル化ではない、それはフルスクリーンおよび（最も重要な）ことができますか？以下

コード：フルスクリーンの場合

function initPlasma() 
    { 
     /* MATH FUNCTIONS ------------------------------ */ 

     function MathUtil() {} 

     MathUtil.getDistance = function (a, b) { 
      return Math.abs(Math.sqrt(a*a + b*b)); 
     }; 

     MathUtil.randRangeDecimel = function (min, max) { 
      return Math.random() * (max - min) + min; 
     }; 

     /* GRID CELL CLASS ------------------------------ */ 

     var Cell = function(x, y, w, h) { 
      this.x = x; 
      this.y = y; 
      this.w = w; 
      this.h = h; 
     } 

     Cell.prototype.update = function(r, g, b) { 
      this.r = r; 
      this.g = g; 
      this.b = b; 

      this.draw(); 
     }; 

     Cell.prototype.draw = function() { 
      if(!plasma) return; 

      // get color, based on distance 
      var ctrlPt1 = MathUtil.getDistance(this.x - plasma.controlPoints[0].x, this.y - plasma.controlPoints[0].y); 
      var ctrlPt2 = MathUtil.getDistance(this.x - plasma.controlPoints[1].x, this.y - plasma.controlPoints[1].y); 
      var ctrlPt3 = MathUtil.getDistance(this.x - plasma.controlPoints[2].x, this.y - plasma.controlPoints[2].y); 

      var rVal = .5+.5*Math.sin(this.r) * Math.cos(ctrlPt1/100) * Math.cos(ctrlPt2/100) * Math.sin(ctrlPt3/100); 
      var gVal = .2+.5*Math.sin(this.g) * Math.sin(ctrlPt1/100) * Math.sin(ctrlPt2/100) * Math.sin(ctrlPt3/100); 
      var bVal = .2+.5*Math.cos(this.b) * Math.sin(ctrlPt1/100) * Math.cos(ctrlPt2/100) * Math.sin(ctrlPt3/100) 

      // draw pixel to canvas 
      plasma.context.fillStyle = "rgb("+ Math.round(127 + rVal * 255) +","+ Math.round(127 + gVal * 255) +","+ Math.round(127 + bVal * 255) +")"; 
      plasma.context.fillRect (this.x, this.y, this.w, this.h); 
     }; 


     /* CONTROL POINT CLASS ------------------------------ */ 

     var ControlPoint = function(canvasW, canvasH) { 
      // create random x,y starting point 
      this.incX = MathUtil.randRangeDecimel(0, 2 * Math.PI); 
      this.incY = MathUtil.randRangeDecimel(0, 2 * Math.PI); 
      // create random x,y oscillating speed 
      this.incXSpeed = MathUtil.randRangeDecimel(.01, .05); 
      this.incYSpeed = MathUtil.randRangeDecimel(.01, .05); 
      // store center point to oscillate around 
      this.centerX = canvasW/2; 
      this.centerY = canvasH/2; 
     } 

     ControlPoint.prototype.update = function() { 
      // increment oscillating based on randomly-calculated speed 
      this.incX += this.incXSpeed; 
      this.incY += this.incYSpeed; 
      // update coordinate 
      this.x = this.centerX + this.centerX * Math.sin(this.incX); 
      this.y = this.centerY + this.centerY * Math.sin(this.incY); 
     }; 


     /* PLASMA CLASS ------------------------------ */ 

     var Plasma = function() { 
      this.COLS = 50; 
      this.ROWS = 50; 
      this.CANVAS_W = 700; 
      this.CANVAS_H = 700; 
      this.FPS = 1000/30; 
      this.NUM_CONTROL_POINTS = 3; 

      this.startR = MathUtil.randRangeDecimel(0,2*Math.PI); 
      this.startG = MathUtil.randRangeDecimel(0,2*Math.PI); 
      this.startB = MathUtil.randRangeDecimel(0,2*Math.PI); 
      this.startIncR = MathUtil.randRangeDecimel(.001,.05); 
      this.startIncG = MathUtil.randRangeDecimel(.001,.05); 
      this.startIncB = MathUtil.randRangeDecimel(.001,.05); 
      this.incR = MathUtil.randRangeDecimel(.0001,.001); 
      this.incG = MathUtil.randRangeDecimel(.0001,.001); 
      this.incB = MathUtil.randRangeDecimel(.0001,.001); 

      this.canvas; 
      this.context; 
      this.grid; 

      this.buildStage(); 
      this.createGrid(); 
      this.createControlPoints(); 
      this.addSaveFunctionality(); 

      var self = this; 
      setInterval(function(){ self.update(); }, this.FPS); 
     }; 

     Plasma.prototype.buildStage = function() { 
      // create and attach canvas element 
      this.canvas = document.createElement('canvas'); 
      this.canvas.width = this.CANVAS_W; 
      this.canvas.height = this.CANVAS_H; 
      document.body.appendChild(this.canvas); 

      // store graphical context 
      this.context = this.canvas.getContext("2d"); 
     }; 

     Plasma.prototype.createGrid = function() { 
      // calculate "pixel" size 
      var boxW = this.CANVAS_W/this.COLS; 
      var boxH = this.CANVAS_H/this.ROWS; 

      // create 2D array of grid cells 
      this.grid = new Array(this.COLS); 
      for(var i = 0; i < this.COLS; i++) { 
       this.grid[ i ] = new Array(this.ROWS) 
       for(var j = 0; j < this.ROWS; j++) { 
        this.grid[ i ][ j ] = new Cell(i * boxW, j * boxH, boxW, boxH); 
       } 
      } 
     }; 

     Plasma.prototype.createControlPoints = function() { 
      this.controlPoints = []; 
      for (var i = 0; i < this.NUM_CONTROL_POINTS; i++) { 
       this.controlPoints.push(new ControlPoint(this.CANVAS_W, this.CANVAS_H)); 
      } 
     }; 

     Plasma.prototype.addSaveFunctionality = function() { 
      var self = this; 
      this.canvas.addEventListener("click", function(e) { 
       window.open(self.canvas.toDataURL("image/jpeg")); 
      }, false); 
     }; 

     Plasma.prototype.update = function() { 

      // increment the starting colors 
      this.startR += this.startIncR; 
      var curR = this.startR; 
      this.startG += this.startIncG; 
      var curG = this.startG; 
      this.startB += this.startIncB; 
      var curB = this.startB; 

      // update control points 
      for (var i = 0; i < this.NUM_CONTROL_POINTS; i++) { 
       this.controlPoints[i].update(); 
      } 

      // increment grid cells and draw to canvas 
      for (var i = 0; i < this.COLS; i++) { 
       for (var j = 0; j < this.ROWS; j++) { 
        // send new base color to cells 
        this.grid[i][j].update(curR, curG, curB); 

        // increment color as we traverse the grid 
        curR += this.incR; 
        curG += this.incG * 3; 
        curB += this.incB; 
       } 
      } 
     }; 


     // kick off the plasma controller 
     var plasma = new Plasma();  
    } 

Answer 1

私はこのスタイルを使用します。

私はidのcanvas要素 'C' を使用

<style> 
    html, document, body { 
     width: 100%; 
     height: 100%; 
     margin: 0px; 
     border: 0; 
     overflow: hidden; /* Disable scrollbars */ 
     display: block; /* No floating content on sides */ 
    } 
    #c { 
     position: fixed; left: 0px; top: 0px; 
    } 

</style> 

：

<canvas id='c'> 

を私はあなたをフォークコード： http://codepen.io/anon/pen/PNebmy

ピクセルについて：わかりませんが、プラズマに伴うpixeley効果はありませんか？