javascript - 在模糊的 div 上移动气泡的 Canvas

Question

我有一个随机移动气泡的 Canvas ，现在当我把它放到一个有过滤器的 div 上时

    -webkit-filter: blur(50px);

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

我不明白是什么问题。

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

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

Answer 1

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

添加一个新的 <canvas>元素添加到 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';

(我不得不使用不同的图像来绕过跨源规则。)

然后在每一帧的开始将新 Canvas 的内容绘制到主 Canvas 上:

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

使用您的版本，我获得了 30 FPS(没有模糊)和 20 FPS(有模糊)。在我的版本中，我得到了 30 FPS 的模糊效果。