模糊畫布，窗口全寬，沒有透明邊緣？

Question

我正在嘗試使用畫布和CSS模糊濾鏡來實現效果。

本質上，我需要一個100％的窗口高度和寬度的畫布，可以擦除以顯示坐在下面的元素。我正在使用模糊，因此形狀/繪圖看起來模糊（這是需要的）。

我的問題是，儘管畫布過大，角落周圍仍然有一個透明的邊緣，顯示下面的元素（即具有藍色背景的物體）。我曾嘗試過多次負面保證金/溢價黑客，但似乎無法解決它？

我需要這個畫布是屏幕的全部寬度，模糊，而不是裁剪，但也許這只是如何CSS過濾器渲染，只有什麼是可見的？

(function() { 
 
     
 
    // make canvas larger than window 
 
    var largeWidth = window.innerWidth * 3; 
 
    var largeHeight = window.innerHeight * 3; 
 
    function createCanvas(parent, width, height) { 
 
     var canvas = {}; 
 
     canvas.node = document.createElement('canvas'); 
 
     canvas.context = canvas.node.getContext('2d'); 
 
     canvas.node.width = largeWidth; 
 
     canvas.node.height = largeHeight; 
 
     parent.appendChild(canvas.node); 
 
     return canvas; 
 
    } 
 

 
    function init(container, width, height, fillColor) { 
 
    var canvas = createCanvas(container, 3000, 3000); 
 
    var ctx = canvas.context; 
 
    ctx.fillCircle = function(x, y, radius, fillColor) { 
 
     this.fillStyle = fillColor; 
 
     this.beginPath(); 
 
     this.moveTo(x, y); 
 
     this.arc(x, y, radius, 0, Math.PI * 2, false); 
 
     this.fill(); 
 
    }; 
 
    ctx.clearTo = function(fillColor) { 
 
     ctx.fillStyle = fillColor; 
 
     ctx.fillRect(0, 0, width, height); 
 
    }; 
 
    ctx.clearTo(fillColor || "#ddd"); 
 
    canvas.node.onmousemove = function(e) { 
 
     var x = e.pageX - this.offsetLeft; 
 
     var y = e.pageY - this.offsetTop; 
 
     var radius = 100; // or whatever 
 
     var fillColor = '#ff0000'; 
 
     ctx.globalCompositeOperation = 'destination-out'; 
 
     ctx.fillCircle(x, y, radius, fillColor); 
 
    }; 
 
    canvas.node.onmousedown = function(e) { 
 
     canvas.isDrawing = true; 
 
    }; 
 
    } 
 

 
    var container = document.getElementById('canvas'); 
 
    init(container, largeWidth, largeHeight, '#fff'); 
 

 
    })();

/* CSS: */ 
 

 
body { 
 
    background: blue; 
 
} 
 

 
#canvas { 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    position: fixed; 
 
    filter: blur(10px); 
 
    -webkit-filter: blur(10px); 
 
}

<div id = "canvas"></div>

請參閱我fiddle

感謝

Answer 1

解決方案1 ​​ - 又名 「今天準備」

不要模糊了你的畫布，但模糊你把裏面;例如：

// After filling circle 
context.shadowColor = color; 
context.shadowBlur = 16; 
context.stroke(); 

這裏是一個fiddle

解決方案2 - 又名 「明天..也許」

WebKit是工作在這樣的功能。但我不確定它會如你打算使用畫布一樣工作，也許它會將整個畫布視爲「模糊遮罩」，因此如果畫布內的內容被擦除，它將在事件之下模糊。這裏是功能：

backdrop-filter: blur(10px); 

下面是一些doc

PS：

1. 我不知道這是必要的帆布包，你沒..中庸之道創建一個，編輯其屬性直接！
2. 哎唷！如果您將元素大小設置爲3倍，但不設置偏移量，則只能在右側和底部溢出

Answer 2

你應該改變你的CSS如下

(function() { 
 

 
    var largeWidth = (window.innerWidth * 3)+30; 
 
    var largeHeight = (window.innerHeight * 3)+30; 
 

 
    function createCanvas(parent, width, height) { 
 

 
    var canvas = {}; 
 
    canvas.node = document.createElement('canvas'); 
 
    canvas.context = canvas.node.getContext('2d'); 
 
    canvas.node.width = largeWidth; 
 
    canvas.node.height = largeHeight; 
 
    parent.appendChild(canvas.node); 
 
    var overlay = document.getElementById("overlay"); 
 
    overlay.style.width=(largeWidth -30) +"px"; 
 
    overlay.style.height =(largeHeight-30)+"px"; 
 
    return canvas; 
 
    } 
 

 
    function init(container, width, height, fillColor) { 
 
    var canvas = createCanvas(container, 3000, 3000); 
 
    var ctx = canvas.context; 
 
    ctx.fillCircle = function(x, y, radius, fillColor) { 
 
     this.fillStyle = fillColor; 
 
     this.beginPath(); 
 
     this.moveTo(x, y); 
 
     this.arc(x, y, radius, 0, Math.PI * 2, false); 
 
     this.fill(); 
 
    }; 
 
    ctx.clearTo = function(fillColor) { 
 
     ctx.fillStyle = fillColor; 
 
     ctx.fillRect(0, 0, width, height); 
 
    }; 
 
    ctx.clearTo(fillColor || "#ddd"); 
 
    canvas.node.onmousemove = function(e) { 
 
     var x = e.pageX - this.offsetLeft; 
 
     var y = e.pageY - this.offsetTop; 
 
     var radius = 100; // or whatever 
 
     var fillColor = '#ff0000'; 
 
     ctx.globalCompositeOperation = 'destination-out'; 
 
     ctx.fillCircle(x, y, radius, fillColor); 
 
    }; 
 
    canvas.node.onmousedown = function(e) { 
 
     canvas.isDrawing = true; 
 
    }; 
 
    } 
 

 
    var container = document.getElementById('canvas'); 
 
    init(container, largeWidth, largeHeight, '#fff'); 
 

 
})();

body { 
 
    background: blue; 
 
} 
 
#canvas { 
 
    margin: -15px; 
 
    filter: blur(10px); 
 
    -webkit-filter: blur(10px); 
 
    position: relative; 
 
} 
 
#overlay { 
 
    overflow:hidden; 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 1; 
 
    filter: unset; 
 
    -webkit-filter: unset; 
 
    }

<div id="overlay"> 
 
<div id="canvas"> 
 
</div> 
 
</div>

Answer 3

您可以從畫布中刪除過濾器並使用gradient brush實現相同。

(function() { 
 
     
 
    // make canvas larger than window 
 
    var largeWidth = window.innerWidth * 3; 
 
    var largeHeight = window.innerHeight * 3; 
 
    function createCanvas(parent, width, height) { 
 
     var canvas = {}; 
 
     canvas.node = document.createElement('canvas'); 
 
     canvas.context = canvas.node.getContext('2d'); 
 
     canvas.node.width = largeWidth; 
 
     canvas.node.height = largeHeight; 
 
     parent.appendChild(canvas.node); 
 
     return canvas; 
 
    } 
 

 
    function init(container, width, height, fillColor) { 
 
    var canvas = createCanvas(container, 3000, 3000); 
 
    var ctx = canvas.context; 
 
    ctx.fillCircle = function(x, y, radius, fillColor) { 
 
     this.fillStyle = fillColor; 
 
     this.beginPath(); 
 
     this.moveTo(x, y); 
 
     this.arc(x, y, radius, 0, Math.PI * 2, false); 
 
     this.fill(); 
 
    }; 
 
    ctx.clearTo = function(fillColor) { 
 
     ctx.fillStyle = fillColor; 
 
     ctx.fillRect(0, 0, width, height); 
 
    }; 
 
    ctx.clearTo(fillColor || "#ddd"); 
 
    canvas.node.onmousemove = function(e) { 
 
     var x = e.pageX - this.offsetLeft; 
 
     var y = e.pageY - this.offsetTop; 
 
     var radius = 100; // or whatever 
 
     var fillColor = '#ff0000'; 
 
     var radgrad = ctx.createRadialGradient(x,y,0,x,y,radius); 
 

 
     radgrad.addColorStop(0, 'rgba(255,0,0,1)'); 
 
     radgrad.addColorStop(0.6, 'rgba(228,0,0,.6)'); 
 
     radgrad.addColorStop(1, 'rgba(228,0,0,0)'); 
 

 
     ctx.globalCompositeOperation = 'destination-out'; 
 
     ctx.fillCircle(x, y, radius, radgrad); 
 
    }; 
 
    canvas.node.onmousedown = function(e) { 
 
     canvas.isDrawing = true; 
 
    }; 
 
    } 
 

 
    var container = document.getElementById('canvas'); 
 
    init(container, largeWidth, largeHeight, '#fff'); 
 

 
    })();

/* CSS: */ 
 

 
body { 
 
    background: blue; 
 
} 
 

 
#canvas { 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    position: fixed; 
 
    
 
}

<div id = "canvas"></div>