HTML Canvas, mờ vẽ đa giác

Question

Tôi làm điều này (chạy đoạn mã dưới đây)

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

Tôi chỉ cần thêm một tính năng để có thể sử dụng nó trên trang web của tôi là xây dựng nó cho. Một số mảnh nổi cần được làm mờ để tạo cảm giác chiều sâu.

Canvas có thể thực hiện việc này không và nếu có thì làm cách nào?

Cảm ơn!

Answer 1

Tôi sử dụng này vài tháng trước, có thể nó có thể làm việc cho bạn cũng như:

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

Ở đây nguồn: http://zurb.com/playground/image-blur-texture