أفضل طمس الحركة على القماش

Question

لقد كان سأل من قبل, ، لكن الحل المقبول لا يناسبني (حرفيًا، لا يوجد شيء غير واضح بالنسبة لي في العرض التوضيحي المرتبط)، وهو عبارة عن خدعة تتضمن عنصرين من القماش.

أستخدم حاليًا تقنية ضبابية الحركة "الرجل الفقير"، والتي تتضمن بشكل أساسي نسخ الصورة المصدر إلى اللوحة القماشية مرارًا وتكرارًا، وإسقاط مستطيل شبه شفاف بنفس لون الخلفية في الأعلى بعد كل تكرار.

هنا عرض توضيحي: http://jsfiddle.net/YmABP/

كما ترون، فهو يعمل بشكل جيد مع حواف الصورة، لكن الأجزاء الداخلية من الصورة لا تصبح غير واضحة على الإطلاق، ويبدو الأمر فظيعًا مع الصور التي تتمتع بشفافية جزئية.

هل هناك تقنية أفضل لطمس الحركة؟من الناحية المثالية، أود أن أكون قادرًا على القيام بشيء مثل context.drawImage وتمرير معلمة العتامة، ولكن لا يوجد شيء من هذا القبيل AFAIK.قد تتم استضافة بعض الصور على نطاقات جهات خارجية، لذلك لن أتمكن من الوصول إلى بيانات البكسل الفردية.إذا كان الأمر كذلك، فيمكننا سحب الصور إلى الخادم الخاص بنا ومن ثم يمكنني التكرار فوق كل بكسل ورسمها كمستطيل صغير شبه شفاف، لكن هذا يبدو مبالغة.

هل يعرف أحد حلاً أفضل لضبابية الحركة، ويفضل أن يكون ذلك الحل الذي يمكنني استخدامه مع الصور البعيدة؟

أشك في أن هذا مهم، لكن بالنسبة لأغراضي الحالية، فإن الأمور تتحرك نحو الأعلى فقط.

Answer 1

فقط قم بتعيين 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';​

Answer 2

هل جربت EaselJS ولها BlurFilter - حاول تغيير/تحريك التمويه في اتجاه واحد (x أو y).