模糊的帆布是窗户的全宽度，没有透明的边缘

我遇到了一些问题，我正在尝试使用画布和CSS Blur Filter实现效果。

本质上，我需要一个帆布，是窗户高度和宽度的100％，可以删除以显示坐在下面的元素。我正在使用模糊，因此形状/图形看起来模糊（这是需要的）。

我的问题是，尽管画布过大，但拐角周围仍然有透明的边缘，它显示了下面的元素（即身体具有蓝色背景）。我尝试了多个负差/溢出hacks，但似乎无法解决吗？

我需要这个画布是屏幕的完整宽度，模糊而不是裁剪，但是也许这只是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>

请参阅我的小提琴

谢谢

态

不要模糊您的画布，而是模糊了您在其中放置的东西；例如：

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

这是小提琴

解决方案2 - aka"明天..也许"

WebKit正在研究此类功能。但是我不确定它会像您打算使用画布一样起作用，也许它会将整个画布视为"模糊面膜"，因此，如果删除了帆布中的内容，则在事件下会模糊。这是一个功能：

backdrop-filter: blur(10px);

这是一些doc

ps：

我不确定是否有必要像您一样包裹帆布。Juste创建并直接编辑其属性！
哎呀！如果将元素大小提高3倍，但不要设置偏移量，则只能在右侧和底部溢出

您可以从画布上卸下过滤器并使用渐变刷实现相同的滤清器。

(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>

您应该更改下面的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>

相关内容

最新更新

热门标签：