より良いキャンバスmotion blur
-
12-12-2019 - |
質問
て 問前, が、受理解できない(いぶ機会がほとんど無かったリンク先のデモ版ソフトウェアとオンラインすべきと思うかもしれないが、少kludgeるキャンバス。
を使っている"貧しい人の"動き"ぼかし技法は、基本的にはblit転送のソースイメージをキャンバス上を落とした半透明の矩形が同じ色を背景として、最後になります。
こちらはデモ: http://jsfiddle.net/YmABP/
ご覧の通り、いくの像が、内部の画像のせにならないぼか、という悲惨な映像として一部を透明化します。
がより良い技術のモーションぼか?理想的には、持ってき方など、さすがだなと私できるように context.drawImage
査に合格することが不透明度パラメータがAFAIKくださいますようお願いるのが存在します。画像の一部が主催する第三者のドメインなんてへのアクセス、個々のピクセルのデータです。まで、ときには、画像をサーバーそしてこれに対して繰り返し処理を実行各ピクセルを描くとも半透明の小さな矩形を、この気を失わせないアイテムです。
なんだろうけど、日本人によりよい動きボケの溶液に、好ましくは私が利用できるリモートです。
かりではないように思えるこの事が、私の現在の目的のものを動かすだけではなく上向きになるようにします。
解決
をセットするだけで、実際に 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';
他のヒント
してください EaselJS その BlurFilter -に変更してみてください/モぼかし一方向(xまたはy).
所属していません StackOverflow