サイト背景にランダムなラインを複数描く

このサンプルは、<body>にはcanvas要素を書かず、javaScriptで生成しています。
（サイズの取得のため、div#wrapper も自動生成しています。）
既存のサイトの背景に Canvasを使いたい場合に便利です。

ページのリロードやリサイズのたびに背景が変化します。お試しください。

Javascriptはこちら。

$(function () {
    Draw();
  $(window).resize(function() {
    Draw();
  });
});
//ここからロード時・リサイズ時の処理
function Draw() {
  // bodyを親とするノード内で、新しくcanvasとdivを作る
  var bodyNode = document.getElementsByTagName('body').item(0);
  var containerNode = document.getElementById('container');
  var newCanvas = document.createElement('canvas');
  var newDiv = document.createElement('div');
  // 新しく作ったdivのidの指定
  newDiv.id = 'wrapper';
  // 新しく作ったdivの中にcanvasを入れる
  newDiv.appendChild(newCanvas);
  // 新しく作ったdivを#containerの前に挿入する
  bodyNode.insertBefore(newDiv, containerNode);
  // canvasのサイズを新しいdivからもらう
  $('canvas').attr({height:$('#wrapper').height()});
  $('canvas').attr({width:$('#wrapper').width()});
  
  // canvasへの描画
  var ctx = newCanvas.getContext('2d');
  var cW = newCanvas.width, //canvasの幅
  cH = newCanvas.height; //canvasの高さ
  // canvasの背景を黒に
  ctx.fillStyle = "rgba(0,0,0,1)";
  ctx.fillRect(0,0,cW,cH);
  // ランダムな始点・終点、カラーのラインを複数描く
  ctx.globalCompositeOperation = "lighter";
  ctx.lineWidth = 150;
  for (i=0; i<50; i++){/*線の本数がこの状態のとき*/
    var lsX = Math.round(Math.random()*cW*100),
        leX = Math.round(Math.random()*cW-100),
        lsY = Math.round(Math.random()*cH*100),
        leY = Math.round(Math.random()*cH-100),
        r = Math.round(Math.random()*255),
        g = Math.round(Math.random()*255),
        b = Math.round(Math.random()*255);
    ctx.beginPath();
    ctx.strokeStyle = "rgba("+r+","+g+","+b+",0.15)";
    ctx.moveTo(lsX,lsY);
    ctx.lineTo(leX,leY);
    ctx.stroke();
  } 
};

描画部分のソース（25〜47行）は、ethertankさんの「Digital Clock」の時計の背景のソースを参考にさせていただきました。
元のソースからの主な変更点は、ラインの始点（lsX,lsY）と終了点（leX,leY）。
ラインの始点は、xやyに100をかけることによって画面の右または下から始まるようにし、終点は100を引くことによって画面の左か上に向かうようにしています。（26〜29行目）

34行目は、変数r、g、bで出した乱数（をMath.roundで丸めたもの）をラインの色として指定しています。最後の0.15は透明度です。
乱数については「[69-6] canvasにマウスの動きに合わせて描画しよう - Math.random() について」をご覧ください。
Canvasでのラインの書き方の詳細は「[69-3] canvasにいろんな曲線を描こう（線のスタイルも）」をご覧ください。

HTMLはこちら。
サンプル1と大きく違うのは、
<div id="wrapper"><canvas></canvas></div>
が無いことです。

<body>
<div id="container"> <!--ここにコンテンツ--> </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script><!--ここにcanvas用のスクリプト--></script>
</body>

CSSのソースはサンプル1と同じです。

サイト背景にランダムな ラインを複数描く

サイト背景にランダムなラインを複数描く