Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

कैनवास के साथ HTML5 में फ़्रेम द्वारा फ़्रेम एनीमेशन


कैनवास के साथ HTML5 में फ्रेम दर फ्रेम एनिमेशन बनाने के लिए, निम्नलिखित कोड को चलाने का प्रयास करें:

var myImageNum = 1;
var lastImage = 5;

var context = canvas.getContext('2d');
var img = new Image;

img.onload = function(){
   context.clearRect( 0, 0, context.canvas.width, context.canvas.height );
   context.drawImage( img, 0, 0 );
};

var timer = setInterval( function(){
   if (myImageNum > lastImage){
      clearInterval( timer );
   }else{
      img.src = "images/left_hnd_"+( myImageNum++ )+".png";
   }
}, 1000/15 );

  1. HTML5 में drawImage () के साथ छवि कैसे बनाएं?

    HTML5 drawImage() विधि का उपयोग कैनवास पर चित्र, कैनवास या वीडियो बनाने के लिए किया जाता है। यह एक छवि के कुछ हिस्सों को भी खींचता है। आप इसका उपयोग इमेज का आकार बढ़ाने या घटाने के लिए भी कर सकते हैं। यहां drawImage() विधि के पैरामीटर मान दिए गए हैं - Sr.No DrawImage () पैरामीटर और विवरण 1

  1. HTML5 कैनवास के साथ छवियों का उपयोग कैसे करें?

    HTML5 टैग का उपयोग स्क्रिप्टिंग का उपयोग करके ग्राफिक्स, एनिमेशन आदि को आकर्षित करने के लिए किया जाता है। यह HTML5 में पेश किया गया एक नया टैग है। HTML5 कैनवास वाली छवियों का उपयोग करने के लिए, drawImage() विधि का उपयोग करें। यह विधि दी गई छवि को कैनवास पर खींचती है। HTML कैनवास के साथ छवियों का

  1. HTML5 कैनवास के साथ एक पैटर्न बनाएं

    HTML5 कैनवास के साथ एक पैटर्न बनाने के लिए निम्नलिखित विधि का उपयोग करें:createPattern(image, पुनरावृत्ति)− यह विधि प्रतिमान बनाने के लिए एक छवि का उपयोग करेगी। दूसरा तर्क निम्नलिखित मानों में से एक के साथ एक स्ट्रिंग हो सकता है:दोहराना, दोहराना-एक्स, दोहराना-वाई, और दोहराना नहीं। यदि खाली स्ट्रिंग