बाद में एनीमेशन फ्रेम में फिर से खींचे जाने के लिए <canvas> सामग्री सहेजें?

Question

मैं <canvas> पर एक ग्राफ चित्रित कर रहा हूं जिसके लिए महंगी गणना की आवश्यकता है। मैं एक एनीमेशन बनाना चाहता हूं (माउस को कैनवास में ले जाने पर) जहां ग्राफ अपरिवर्तनीय है, लेकिन कुछ अन्य ऑब्जेक्ट्स इस पर खींचे जाते हैं।

क्योंकि कैनवास को बहुत से फिर से खींचा जाना होगा, मैं प्रत्येक फ्रेम के लिए ग्राफ प्रस्तुत करने के लिए गणना नहीं करना चाहता हूं। मैं ग्राफ को एक बार कैसे खींच सकता हूं, इसे सहेज सकता हूं, और फिर एनीमेशन के बाद के फ्रेम को फिर से चलाने के लिए सहेजे गए प्रतिपादन का उपयोग कर सकता हूं, ताकि महंगी गणना केवल & पर होनी पड़े, मुझे बस इतना आसान एनीमेशन परत है?

मैं एक दूसरे कैनवास & तो ctx.drawImage() का उपयोग कर मुख्य कैनवास पर यह रेंडर करने के ग्राफ ड्राइंग कोशिश की, लेकिन कैनवास पर ड्राइंग, जब तक यह डोम & नहीं display:none; में है काम करने के लिए प्रतीत नहीं होता। क्या मुझे कुछ हैकी करना है जैसे अस्थायी कैनवास को देखने के लिए, या क्या ऐसा करने का एक क्लीनर तरीका है?

Answer 1

आपको कम से कम 2 कैनवस का उपयोग करने की आवश्यकता है: एक जटिल ड्राइंग के साथ, और दूसरा, एनिमेटेड आकृतियों के साथ पहले (उसी आकार के साथ, पूर्ण में स्थित) के शीर्ष पर। यह विधि आईई पर काम करेगी, और इमेजडेटा ExCanvas के साथ काम नहीं करेगी।

कैनवास पर जटिल चित्रों को करने वाली प्रत्येक लाइब्रेरी इस विधि (फ़्लोट और अन्य) का उपयोग करती है।

<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

मुझे flot.js चार्टिंग लाइब्रेरी में कुछ बदलाव करना पड़ा। मुझे 99% यकीन है कि यह ओवरलैपिंग कैनवस का उपयोग करता है। एक चार्ट परत और एक ओवरले परत है। आप स्रोत कोड देख सकते हैं।

Answer 3

कैसे अपने ग्राफ प्रतिपादन के आराम के लिए

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

और फिर

ctx.putImageData(imdata, 0,0); 

अपने कैनवास पर पहली बार ड्राइंग और उसके बाद के बारे में।