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