Question

我有一个画布，其中有随机移动的气泡，现在当我把它放到一个带有滤镜的div上时

    -webkit-filter: blur(50px);

然后画布气泡运动fps下降，平滑度降低。

我没有得到什么问题。

背景模糊的版本：http://freakengineers.com/bubbles/index.php

背景正常的版本：http://freakengineers.com/bubbles/index2.php

Answer 1

您可以在单独的画布中加载和模糊图像（但我不知道您是否可以使用内置模糊算法 - 我已经使用StackBlur）作为一种缓冲，然后将其复制到每个帧的主画布上。 JSFiddle：http://jsfiddle.net/1m8rbt7j/

向HTML添加新的<canvas>元素，将图片加载到其中，然后模糊新画布：

var blurimg = new Image();

blurimg.onload = function() {
  var blurcv = document.getElementById('blurcanvas');
  blurcv.getContext('2d').drawImage(blurimg,0,0);
  stackBlurCanvasRGB('blurcanvas', 0, 0, 1580, 730, 50);
};

blurimg.src = 'http://i.imgur.com/WaMsYBC.jpg';

（我必须使用不同的图像来解决跨原始规则。）

然后在每个帧的开头将新画布的内容绘制到主画布：

context.clearRect(0,0, w,h);
context.drawImage(document.getElementById('blurcanvas'),0,0);

对于你的版本，我得到30 FPS没有模糊和20 FPS随之而来。我的版本中模糊了30 FPS。

在模糊的div上移动气泡的画布

1 个答案: