حفظ <قماش> محتويات ليتم إعادة رسم في إطارات الرسوم المتحركة في وقت لاحق؟

Question

وأنا رسم بياني على <canvas> يتطلب حسابات تكلفة. وأود أن خلق الرسوم المتحركة (عندما تتحرك الماوس عبر قماش) حيث الرسم لا يتغير، ولكن يتم رسم بعض الكائنات الأخرى أكثر من ذلك.

ولأن قماش سوف يتعين إعادة رسم الكثير، وأنا لا أريد أن إجراء العمليات الحسابية لجعل الرسم البياني للكل إطار. كيف يمكنني رسم بياني مرة واحدة، حفظه، ومن ثم استخدام المحفوظة تقديم لإعادة رسم أطر لاحقة للرسوم المتحركة، حتى أن الحسابات باهظة الثمن لا تملك إلا أن يحدث مرة واحدة وكل ما لدي لإعادة رسم هي طبقة الرسوم المتحركة أبسط من ذلك بكثير؟

وحاولت رسم بياني على قماش الثاني وثم استخدام ctx.drawImage() لجعله على قماش الرئيسي، ولكن بالاعتماد على قماش لا يبدو قادرا على العمل إلا إذا كان في دوم وليس display:none;. هل يجب أن نفعل شيئا hacky مثل موقف قماش مؤقت من عرض، أم أن هناك طريقة أنظف للقيام بذلك؟

Answer 1

وتحتاج إلى استخدام ما لا يقل عن 2 اللوحات: واحدة مع الرسم معقدة، والثانية، وعلى رأس أول (مع نفس الحجم، المتمركزة في المطلق)، مع الأشكال المتحركة. يعمل هذا الأسلوب على IE، وgetImageData لا يعمل مع ExCanvas.

وكل مكتبة التي لا رسومات معقدة على اللوحات استخدام هذه الطريقة (FLOT وغيرها).

<div style="width: 600px; height: 300px; position: relative;" id="container">
  <canvas class="canvas" style="position: absolute; left: 0px; top: 0px;" width="600" height="300"/>
  <canvas class="overlay" style="position: absolute; left: 0px; top: 0px;" width="600" height="300"/>
</div>

Answer 2

وماذا عن رسم بياني الخاص للمرة الأولى على قماش ثم

var imdata = ctx.getImageData(0,0,width,height);

ثم

ctx.putImageData( imdata, 0,0);

وبالنسبة لبقية من التقديم.

Answer 3

وكان لي أن أدلي ببعض التغييرات على flot.js رسم المكتبة. أنا متأكد 99٪ أنه يستخدم اللوحات المتداخلة. هناك طبقة الرسم وطبقة تراكب. هل يمكن أن ننظر في شفرة المصدر.