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() मेथड से इमेज कैसे ड्रॉ करें?

    Canvas drawImage() मेथड HTML5 Canvas API का drawImage() मेथड इमेज, कैनवास या वीडियो को कैनवास पर ड्रॉ करता है। इमेज के भाग भी ड्रॉ कर सकते हैं और आकार बदल सकते हैं। पैरामीटर्स: क्र.सं.पैरामीटर और विवरण 1img - इमेज, कैनवास या वीडियो एलिमेंट 2sx - क्लिपिंग शुरू करने का X निर्देशांक (वैकल्पिक) 3sy

  1. HTML5 कैनवास के साथ इमेज का उपयोग कैसे करें? HTML5 कैनवास के साथ इमेज का उपयोग कैसे करें?

    HTML5 <canvas> टैग का उपयोग स्क्रिप्टिंग के माध्यम से ग्राफिक्स, एनिमेशन आदि बनाने के लिए किया जाता है। HTML5 कैनवास के साथ इमेज का उपयोग करने के लिए drawImage() मेथड का उपयोग करें। यह मेथड दी गई इमेज को कैनवास पर बनाता है।उदाहरणHTML कैनवास के साथ इमेज का उपयोग करने का तरीका सीखने के लिए निम्न

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

    HTML5 कैनवास के साथ पैटर्न बनाने के लिए निम्नलिखित मेथड का उपयोग करें: createPattern(image, repetition) − यह मेथड पैटर्न बनाने के लिए एक इमेज का उपयोग करेगा। दूसरा आर्गुमेंट निम्नलिखित मानों में से एक के साथ एक स्ट्रिंग हो सकता है: repeat, repeat-x, repeat-y, और no-repeat। यदि खाली स्ट्रिंग या null