javascript - 模糊窗口全宽没有透明边缘的 Canvas ？

Question

我在尝试使用 Canvas 和 CSS 模糊滤镜实现的效果时遇到了一些问题。

本质上，我需要一个 100% 的窗口高度和宽度的 Canvas ，可以删除它以显示位于下方的元素。我正在使用模糊，因此形状/绘图看起来很模糊(这是必需的)。

我的问题是，尽管 Canvas 尺寸过大， Angular 落周围仍然有透明边缘，显示下方的元素(即具有蓝色背景的主体)。我尝试了多种负边距/溢出黑客攻击，但似乎无法绕过它？

我需要这个 Canvas 是屏幕的整个宽度，模糊，根本不裁剪，但也许这就是 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 - 即“今天就绪”

不要模糊你的 Canvas ，而是模糊你放在里面的东西；例如:

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

这是一个fiddle

解决方案 2 - 又名“明天 .. 也许”

Webkit 正在开发此类功能。但我不确定它是否会像您预期的那样使用 Canvas 工作，也许它会将整个 Canvas 视为“模糊蒙版”，因此如果删除 Canvas 内的内容，它会在事件下方模糊。这是功能:

backdrop-filter: blur(10px);

这是一些 doc

附言:

1. 我不确定是否有必要像您那样包裹 Canvas ..只需创建一个并直接编辑其属性即可!
2. 哎呀!如果您将元素大小增加 3 倍但不设置偏移量，它将只能在右侧和底部溢出