HTML Canvas, Unschärfen gezeichnet Polygon

Question

Ich habe dieses (run-Snippet)

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"\>

Ich muss nur eine Funktion hinzufügen können, um es auf der Website verwenden Ich baue es für. Einige der schwebenden Scherben müssen verschwommen sein, um ein Gefühl von Tiefe zu vermitteln.

Kann Canvas dies tun, und wenn ja, wie?

Danke!

Answer 1

habe ich diese paar Monaten, vielleicht könnte es auch für Sie arbeiten:

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(); 
} 

Hier ist die Quelle: http://zurb.com/playground/image-blur-texture