html

<div class="hello-canvas">
<canvas id="eye-candy"></canvas>
<h1>hello world</h1>
</div>

CSS

.hello-canvas{
 position:relative;
 z-index:-1;
 width:100%;
 height:100px;
 margin-left:auto;
 margin-right:auto;
}
canvas{
 width:100%;
 height:100px;
}
h1{
 position:absolute;
 top:0;
 padding-left:1em;
 width:100%;
 line-height:100px;
 max-width:100%;
 box-sizing:border-box;
 margin:0;
 text-align:center;
}

Script

jQuery( function ( $ ) {

 var canvas= document.getElementById('eye-candy');
 if (canvas.getContext){

var ctx= canvas.getContext('2d');

for(i= 0; i < 100; i++){
 ctx.beginPath();
 var r= Math.floor(Math.random() * 255);
 var g= Math.floor(Math.random() * 255);
 var b= Math.floor(Math.random() * 255);
 ctx.strokeStyle= 'rgba(' + r + ',' + g + ',' + b + ', 0.2)';
 ctx.moveTo(Math.random()*600, 0);
 ctx.lineTo(Math.random()*600, Math.random()*200);
 ctx.stroke();
}
 }
} );

新着記事