javascript - 如何在不同坐标中模糊 ImageData

Question

我正在学习 HTML5 并从头开始构建我的老虎机游戏。旋转时，我想在 Y 中实现对 imageData 的模糊。我已经对 imageData 尝试了一些算法，它使一切变得非常慢，我也尝试使用 webkitFilter 作为画布的样式，它仅适用于半径。你有什么好的建议吗？

Answer 1

您可以预渲染运动模糊插槽旋转轮：

• 从所有插槽元素垂直排列的图像开始。
• 使用临时画布创建垂直运动模糊（参见下面的代码）。
• 要“旋转”，请通过插槽窗口为较高的轮子画布设置动画。

要有效地创建垂直运动模糊：

• 反复绘制垂直槽图像。
• 每次绘制增加 Y 偏移量。
• 减少每次绘制的不透明度。

这是 y 模糊代码：

function motionBlur(wheelContext, image, blurAmount) {
    wheelContext.clearRect(0,0,wheelContext.canvas.width,wheelContext.canvas.height)
    var y=0;
    while (++y <= blurAmount) {
        wheelContext.globalAlpha=1/y;
        wheelContext.drawImage(image, 0, 0, image.width, image.height+y);
    }
}