HTML5キャンバスを使用して、モーションブラー効果のようなものを作成しようとしていますが、成功しません。
基本的に私がやろうとしているのは、写真を撮って、写真を撮って人が動いたときのように、「早送り」のように見せることです。
HTML5キャンバスを使用して、モーションブラー効果のようなものを作成しようとしていますが、成功しません。
基本的に私がやろうとしているのは、写真を撮って、写真を撮って人が動いたときのように、「早送り」のように見せることです。
さまざまなぼかしアルゴリズムを実装したキャンバス用のライブラリがいくつかあります。このサンプルでわかるように、 EaselJSは x 軸と y 軸のぼかしを個別に実装しています。
必要なのは、ライブラリからの x 軸のぼかしだけです。
私は反対の問題でここに来ました。画像をスケーリングするときにぼやけを取り除こうとしていました。幸いなことに、私の問題はあなたの問題の簡単な解決策につながります。また、面倒な作業はAPIで行うので効率的です。
画像を解像度の低いキャンバスに描画してから拡大すると、ぼやけた画像になります。いくつかのブラウザでこれを試しましたが、ほぼ同じように動作するようです。 この質問では、ブラウザー間および将来のバージョンでのこの手法の一貫性について懸念がある場合に、ブラウザーがこのぼかし動作を使用する時期と理由を探ります。
canvas.drawImage のイメージ引数は、別のキャンバスを受け入れます。画像を中間キャンバスに描画するときは、1 つの軸に沿って小さな解像度を使用してみることができます。次に、元のサイズに戻すと、ぼかし効果は主に 1 つの軸に沿ったものになります。
私は画像の専門家ではないので、モーション ブラーを最適に使用する方法はわかりません (1 つの軸に沿って行う必要があるかどうかなど)。欲しいです。
お役に立てれば