8

以前に質問されましたが、受け入れられた解決策は私には機能しません（文字通り、リンクされたデモでは何もぼやけていません）、それは2つのキャンバス要素を含むちょっとした悩みの種です。

私は現在、「貧乏人」のモーションブラー手法を使用しています。これは、基本的に、ソースイメージをキャンバスに何度もブリットし、各反復後に背景と同じ色の半透明の長方形を上にドロップすることを含みます。

これがデモです：http：//jsfiddle.net/YmABP/

ご覧のとおり、画像の端にはうまく機能しますが、画像の内側の部分がまったくぼやけることはなく、部分的に透明な画像ではひどく見えます。

モーションブラーのより良いテクニックはありますか？理想的には、不透明度パラメータのようなことを実行して渡すことができるようにしたいのですcontext.drawImageが、AFAIKにはそのようなものはありません。一部の画像はサードパーティのドメインでホストされている可能性があるため、個々のピクセルデータにアクセスすることはできません。結局のところ、画像をサーバーにプルしてから、各ピクセルを繰り返し処理して、半透明の小さな長方形として描画することができますが、これはやり過ぎのようです。

より良いモーションブラーソリューション、できればリモート画像で使用できるソリューションを知っている人はいますか？

私はこれが重要かどうかは疑わしいが、私の現在の目的では、物事は上向きにしか動かない。

4

2 に答える 2

7

globalAlpha画像を繰り返し描画する前に、コンテキストのプロパティを設定するだけです。

デモ： http： //jsfiddle.net/qfEUt/

var img = new Image,
    ctx = document.querySelector('canvas').getContext('2d');
    ctx.globalAlpha = 0.1;

img.onload=function(){
  for (var y=0;y<10;++y) ctx.drawImage(img,0,y);
}
img.src = 'http://phrogz.net/tmp/gkhead-small.png';​
于 2012-05-21T22:26:39.100 に答える
2

EaselJSとそのBlurFilterを試しましたか？一方向（xまたはy）でブラーを変更/アニメーション化してみてください。

于 2012-05-21T22:35:47.753 に答える