HTML Canvas, la sfocatura disegnato

Question

Ho fatto questo (frammento di correre sotto)

var Canvas = document.getElementById('c'); 
 
    var ctx = Canvas.getContext('2d'); 
 

 
    var resize = function() { 
 
     Canvas.width = Canvas.clientWidth; 
 
     Canvas.height = Canvas.clientHeight; 
 
    }; 
 
    window.addEventListener('resize', resize); 
 
    resize(); 
 

 
    var elements = []; 
 
    var presets = {}; 
 

 
    presets.shard = function (x, y, s, random, color) { 
 
     return { 
 
      x: x, 
 
      y: y, 
 
      draw: function(ctx, t) { 
 
       this.x += 0; 
 
       this.y += 0; 
 
       var posX = this.x + + Math.sin((50 + x + (t/10))/100) * 5; 
 
       var posy = this.y + + Math.sin((55 + x + (t/10))/100) * 7; 
 
       ctx.beginPath(); 
 
       ctx.fillStyle = color; 
 
       ctx.moveTo(posX, posy); 
 
       ctx.lineTo(posX+random,posy+random); 
 
       ctx.lineTo(posX+random,posy+random); 
 
       ctx.lineTo(posX+0,posy+50); 
 
       ctx.closePath(); 
 
       ctx.fill(); 
 
      } 
 
     } 
 
    }; 
 

 
    for(var x = 0; x < Canvas.width; x++) { 
 
     for(var y = 0; y < Canvas.height; y++) { 
 
      if(Math.round(Math.random() * 60000) == 1) { 
 
       var s = ((Math.random() * 5) + 1)/10; 
 
       if(Math.round(Math.random()) == 1){ 
 
        var random = Math.floor(Math.random() * 100) + 10; 
 
        var colorRanges = ['#8c8886', '#9c9995']; 
 
        var color = colorRanges[Math.floor(Math.random() * colorRanges.length)]; 
 
        elements.push(presets.shard(x, y, s, random, color)); 
 
       } 
 
      } 
 
     } 
 
    } 
 

 
    setInterval(function() { 
 
     ctx.clearRect(0, 0, Canvas.width, Canvas.height); 
 
     var time = new Date().getTime(); 
 
     for (var e in elements) 
 
      elements[e].draw(ctx, time); 
 
    }, 10);

<canvas id="c" width="1000" height="1000"\>

Ho solo bisogno di aggiungere una funzionalità per essere in grado di utilizzare sul sito che sto costruendo per. Alcuni dei frammenti fluttuanti devono essere sfocati per dare un senso di profondità.

Can Canvas fare questo, e se sì, come?

Grazie!

Answer 1

Ho usato questo qualche mese fa, forse potrebbe funzionare per voi pure:

var canvas = document.getElementById("heroCanvas"); 
var canvasContext = canvas.getContext("2d"); 

var canvasBackground = new Image(); 
canvasBackground.src = "image.jpg"; 

var drawBlur = function() { 
    // Store the width and height of the canvas for below 
    var w = canvas.width; 
    var h = canvas.height; 
    // This draws the image we just loaded to our canvas 
    canvasContext.drawImage(canvasBackground, 0, 0, w, h); 
    // This blurs the contents of the entire canvas 
    stackBlurCanvasRGBA("heroCanvas", 0, 0, w, h, 100); 
} 

canvasBackground.onload = function() { 
    drawBlur(); 
} 

Qui la fonte: http://zurb.com/playground/image-blur-texture