एचटीएमएल 5 में, कैसे मैं आसानी से आकर्षित कर सकते हैं (कोई बहुत ज्यादा जटिल कोड कृपया) एक कैनवास है कि काम करता है में एक एनिमेटेड GIF (drawImage साथ केवल पहली फ्रेम कैनवास में दिखाया गया है)एनिमेटेड GIF एचटीएमएल 5 कैनवास में
कैनवास एनीमेशन एचटीएमएल 5 spec का हिस्सा नहीं है। या तो GIF करने के लिए वापस या एक जावास्क्रिप्ट आधारित पुस्तकालय कि एसवीजी renders या वापस कैनवास/VML पर गिर जाता है पर विचार करें: http://raphaeljs.com/
मेरा मानना है कि आप के लिए http://slbkbs.org/jsgif
देख रहे हैं दुर्भाग्य से, डोम व्यक्तिगत फ्रेम का खुलासा नहीं करता जीआईएफ का, इसलिए यह जीआईएफ (एक्सएमएलएचटीपीआरक्वेट के साथ) डाउनलोड करके, इसे पार्सिंग करके और
<canvas>पर ड्राइंग करके किया जाता है।
ठीक है अगर gif फ़ाइलों का स्वचालित कैनवास एनीमेशन उपलब्ध नहीं है, तो आप स्प्राइट-शीट्स का उपयोग करने का प्रयास कर सकते हैं, लेकिन वास्तव में थोड़ा और कोड की आवश्यकता होगी।
var img_obj = {
'source': null,
'current': 0,
'total_frames': 16,
'width': 16,
'height': 16
};
var img = new Image();
img.onload = function() { // Triggered when image has finished loading.
img_obj.source = img; // we set the image source for our object.
}
img.src = 'img/filename.png'; // contains an image of size 256x16
// with 16 frames of size 16x16
function draw_anim(context, x, y, iobj) { // context is the canvas 2d context.
if (iobj.source != null)
context.drawImage(iobj.source, iobj.current * iobj.width, 0,
iobj.width, iobj.height,
x, y, iobj.width, iobj.height);
iobj.current = (iobj.current + 1) % iobj.total_frames;
// incrementing the current frame and assuring animation loop
}
function on_body_load() { // <body onload='on_body_load()'>...
var canvas = document.getElementById('canvasElement');
// <canvas id='canvasElement' width='320' height='200'/>
var context = canvas.getContext("2d");
setInterval((function (c, i) {
return function() {
draw_anim(c, 10, 10, i);
};
})(context, img_obj), 100);
}
इस प्रकार मैं समस्या से निपटूंगा। आशा है कि यह सहायक रहा होगा। (परीक्षण)
इस वर्ष की तरह है। जिस तरह से मैं इसे निपटाना चाहता हूं वह अब अलग होगा। यदि आपको अपने कोड में एक नई लाइब्रेरी जोड़ने में कोई फर्क नहीं पड़ता है तो इन टिप्पणियों में सुझाए गए कई उपलब्ध विकल्पों में से एक का उपयोग करें। ईएस 6 के आगमन को ध्यान में रखते हुए यह अधिक अच्छी तरह से एक वर्ग के रूप में और अधिक कार्यक्षमता के साथ पुनर्निर्मित किया जाएगा। :) –
किसी के लिए अभी भी इस समस्या में समस्या है, या जो लोग अपनी छवियों को गतिशील रूप से लोड नहीं करना चाहते हैं या यह पता लगाने के लिए कि उन्हें कितने फ्रेम उपयोग करने की आवश्यकता है;
एचटीएमएल पेज पर एनिमेटेड जीआईएफ छोड़ें, प्रदर्शित करने के लिए सेट करें: ब्लॉक, दृश्यता: दृश्यमान, और स्थिति: सीएसएस में सापेक्ष। गतिशील रूप से कैनवास के नीचे नकारात्मक मार्जिन-टॉप/जेड-इंडेक्स (या आपके पास क्या है) के साथ स्थिति रखें। फिर एक जावास्क्रिप्ट टाइमर सेट करें जो चित्र को सही तरीके से रीफ्रेश करने के लिए जितनी जल्दी हो सके ड्राइमेज को बार-बार कॉल करता है।
यदि छवि डोम में दिखाई नहीं दे रही है, तो ड्राइमेज दिनचर्या एनीमेशन के बाद के फ्रेम प्राप्त नहीं कर सकती है। अगर छवि पूरी तरह से कैनवास के नीचे स्थित है, तो प्रतिपादन लगी हुई है।
आप इस तरह के लेयरिंग नहीं कर सकते हैं जब तक आप एक दूसरे के शीर्ष पर एकाधिक कैनवास नहीं डालते – trinalbadger587
ओह, क्या यह 2016 के अंत तक बदल गया था? क्योंकि यह ठीक काम कर रहा था जब मैंने इसे क्रोम और 2014 में वीटीसी 1010 दोनों में किया था। – Ayelis
ठीक है, जैसा कि अन्य लोगों ने पहले ही कहा है, आपको फ्रेम में एनीमेशन को विभाजित करना होगा। समस्या से निपटने का मेरा तरीका व्यक्तिगत प्राथमिकता से अधिक है, लेकिन मैं जीआईएमपी में जीआईएफ खोलता हूं और एक प्लगइन का उपयोग करके मैं उन सभी फ्रेमों को परिवर्तित करता हूं जो अलग-अलग परतों के रूप में एक स्प्राइट शीट में प्रदर्शित होते हैं। तब मुझे केवल कैनवास में स्प्राइट को एनिमेट करना होगा जो बहुत आसान है।
यहाँ प्लगइन के लिए link है: डी
यह उपयोगी हो सकता है: https://github.com/matt-way/gifuct-js – JoeRocc