"TEST: nebula"
Bootstrap 3.1.0 Snippet by mrmccormack

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2 >Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> http://www.professorcloud.com/mainsite/canvas-nebula.htm <h1>Experiment - HTML5 Canvas Nebula</h1> <canvas style="display:none" id="canvas" width="285" height="285">ABC</canvas> <canvas style="display:none" id="canvas3" width="570" height="570">efg</canvas> <canvas id="canvas2" width="570" height="570">*** THIS BROWSER DOES NOT SUPPORT THE CANVAS ELEMENT ***</canvas> <h3>How it Works</h3> </div> </div>
////////////////////////////////////////////////////////////////////////////////// // A demonstration of a Canvas nebula effect // (c) 2010 by R Cecco. <http://www.professorcloud.com> // MIT License // // Please retain this copyright header in all versions of the software if // using significant parts of it ////////////////////////////////////////////////////////////////////////////////// $(document).ready(function(){ (function ($) { // The canvas element we are drawing into. var $canvas = $('#canvas'); var $canvas2 = $('#canvas2'); var $canvas3 = $('#canvas3'); var ctx2 = $canvas2[0].getContext('2d'); var ctx = $canvas[0].getContext('2d'); var w = $canvas[0].width, h = $canvas[0].height; var img = new Image(); // A puff. var Puff = function(p) { var opacity, sy = (Math.random()*285)>>0, sx = (Math.random()*285)>>0; this.p = p; this.move = function(timeFac) { p = this.p + 0.3 * timeFac; opacity = (Math.sin(p*0.05)*0.5); if(opacity <0) { p = opacity = 0; sy = (Math.random()*285)>>0; sx = (Math.random()*285)>>0; } this.p = p; ctx.globalAlpha = opacity; ctx.drawImage($canvas3[0], sy+p, sy+p, 285-(p*2),285-(p*2), 0,0, w, h); }; }; var puffs = []; var sortPuff = function(p1,p2) { return p1.p-p2.p; }; puffs.push( new Puff(0) ); puffs.push( new Puff(20) ); puffs.push( new Puff(40) ); var newTime, oldTime = 0, timeFac; var loop = function() { newTime = new Date().getTime(); if(oldTime === 0 ) { oldTime=newTime; } timeFac = (newTime-oldTime) * 0.1; if(timeFac>3) {timeFac=3;} oldTime = newTime; puffs.sort(sortPuff); for(var i=0;i<puffs.length;i++) { puffs[i].move(timeFac); } ctx2.drawImage( $canvas[0] ,0,0,570,570); setTimeout(loop, 10 ); }; // Turns out Chrome is much faster doing bitmap work if the bitmap is in an existing canvas rather // than an IMG, VIDEO etc. So draw the big nebula image into canvas3 var $canvas3 = $('#canvas3'); var ctx3 = $canvas3[0].getContext('2d'); $(img).bind('load',null, function() { ctx3.drawImage(img, 0,0, 570, 570); loop(); }); img.src = 'http://www.professorcloud.com//images/nebula/nebula.jpg'; })(jQuery); });

Related: See More


Questions / Comments: