Я пытаюсь использовать холст HTML5, чтобы сделать что-то вроде эффекта размытия движения, но безуспешно.
В основном то, что я пытаюсь сделать, это сделать фотографию и сделать ее похожей на «перемотку вперед», например, когда вы делаете снимок, а человек двигается.
Существует несколько библиотек для холста, в которых реализованы различные алгоритмы размытия. EaselJS независимо реализовал размытие по осям X и Y, как вы можете видеть в этом примере.
Все, что вам может понадобиться, это размытие по оси X из их библиотеки.
Я попал сюда с противоположной проблемой. Я пытался избавиться от размытия при масштабировании изображений. К счастью, моя проблема приводит к простому решению вашей проблемы. Кроме того, всю тяжелую работу выполняет API, поэтому он эффективен.
Если вы нарисуете изображение на холсте с меньшим разрешением, а затем увеличите его, вы получите размытые изображения. Я пробовал это в нескольких браузерах, и, похоже, это работает примерно так же. Этот вопрос исследует, когда и почему браузеры будут использовать такое размытие, если вас это беспокоит. о согласованности этой техники в разных браузерах и в будущих версиях.
Аргумент изображения для canvas.drawImage принимает другой холст. Когда вы рисуете изображение на промежуточном холсте, вы можете попробовать использовать небольшое разрешение по одной оси. Затем верните его к исходному размеру, и эффект размытия должен быть в основном вдоль одной оси.
Я не эксперт по изображениям, поэтому я не знаю, как оптимально использовать размытие в движении (независимо от того, должно ли оно быть вдоль одной оси и т. д.), но с некоторыми вознями и исследованиями вы можете использовать эту технику для получения эффектов, которые вы хотите. хотеть.
Надеюсь это поможет
