如何在不同的坐标中模糊ImageData

Question

我正在研究HTML5并从头开始构建我的老虎机游戏。在旋转时，我想在Y中实现模糊到imageData。我尝试了一些algrothim到imageData，它使一切变得非常慢，我也尝试了webkitFilter for canvas的样式，它只适用于radius。你有什么好的建议吗？

Answer 1

您可以预渲染动作模糊的槽旋转轮：

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

有效创建垂直运动模糊：

• 反复绘制垂直插槽图像。
• 每次抽奖时增加Y偏移量。
• 每次抽奖都会降低不透明度。

这是y-blur代码：

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);
    }
}