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

我正在研究HTML5，并从头开始构建老虎机游戏。旋转时，我想在Y上对imageData实现模糊。我已经对imageData尝试了一些algrothim，这使一切变得非常慢，我也尝试将webkitFilter应用于画布样式，它仅适用于radius。您对此有什么好的建议吗？

最佳答案

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


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




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


重复绘制垂直插槽图像。
每次绘制都增加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);
    }
}