加算セロファン（X座標固定） var.2

by ethertank

HTML

<canvas id="vision" width="418" height="418"></canvas>

CSS

body { background: #332930; }
#vision {
  border: 1px solid #ddd;
  display: block; margin: 20px auto;
  -webkit-box-shadow: 0 2px 3px 0 #000;
     -moz-box-shadow: 0 2px 3px 0 #000;
          box-shadow: 0 2px 3px 0 #000;
}

JavaScript

// forked from ethertank's "加算セロファン" http://jsdo.it/ethertank/lY7r

(function(){
if(window.addEventListener)window.addEventListener("load",All,false);

function All(){

  //指定範囲の整数を返すオレオレ関数(のつもり)  
  var RandomNum = function(Min,Max){
    var N = Math.floor(Math.random()*(Max+1-Min))+Min;
    return N;  
  };

  var c = document.getElementById('vision');
  if (c.getContext){
    var ctx = c.getContext('2d'),
        cW = c.width,  //canvasの幅
        cH = c.height;  //canvasの高さ
    //==セッティング===================================
    var BGC = "#009", //下地の色
        FPS = 8, //秒間描画フレーム数（期待値）
        LineAlpha = 0.2,  //模様の不透明度
        Type = "lighter", //模様の合成方法
        LineLength = 180,  //ライン本数
        LineWidth = 50;  //ラインの太さ

    var flg = true; //動作中である事を示すフラグ
    draw(); //取り敢えず喰らわす。
  }

  c.addEventListener("click",changeFlg,false);

  function changeFlg(){
    if(flg==false){ flg = !flg; draw(); }
    else{ flg=!flg; }
  }//※Flgをfalseにすれば関数「draw」内で止めてくれる。
  
  function draw(){
    if(flg==false){ return false; }

    // 下地を塗る
    ctx.clearRect(0,0,cW,cH);
    ctx.globalAlpha = 1;
    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = BGC;
    ctx.fillRect(0,0,cW,cH);

    // 模様を描画
    ctx.globalAlpha = LineAlpha;
    ctx.globalCompositeOperation = Type;
    ctx.lineWidth = LineWidth;
    for (i=0; i<LineLength; i++){
      ctx.beginPath();
      var lX = parseInt(Math.random()*cW,10),
          lsY = parseInt(Math.random()*(cH-100),10)+50,
          leY = parseInt(Math.random()*(cH-100),10)+50,
          r = RandomNum(100,255),
          g = RandomNum(0,200),
          b = RandomNum(0,230);
      ctx.moveTo(lX,lsY);
      var sColor = "rgb("+r+","+g+","+b+")" ;
      ctx.strokeStyle = sColor;
      ctx.lineTo(lX,leY);
      ctx.stroke();
    }

    // 自身を、変数"drawTiming"で設定した間隔の後再実行
    myTimer = setTimeout(arguments.callee, 1000/FPS );
  }//End of function draw()

}
})();