HTML畫布，畫的模糊多邊形

Question

我做了這個（運行下面摘錄）

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

我只需要添加一個功能能夠使用它我建立的網站上爲了。一些浮動碎片需要模糊以給出深度感。

Can Canvas可以做到這一點，如果是這樣，如何？

謝謝！

Answer 1

我這個幾個月前使用，也許它會爲你工作，以及：

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

這裏來源：http://zurb.com/playground/image-blur-texture