🔻 🔒 📰 HTML5 CANVAS कदम से कदम: छवियाँ ✊🏽 😀 🦔

CANVAS कदम से कदम:

कैनवास पर ड्राइंग के बारे में लेख की निरंतरता, जिसमें हम सीखेंगे कि छवियों का उपयोग कैसे करें। स्वाभाविक रूप से, आदिम के साथ कैनवास पर ड्राइंग बहुत असुविधाजनक है और कुछ श्रम लागतों की आवश्यकता होती है, और एक और वर्ष का परिणाम गुणवत्ता में स्पष्ट रूप से लंगड़ा होता है। इसलिए, स्वाभाविक रूप से कैनवस एपी में छवियों के साथ बातचीत प्रदान करता है। एक छवि को जोड़ना सशर्त रूप से दो चरणों में विभाजित किया जा सकता है: एक जावास्क्रिप्ट छवि ऑब्जेक्ट बनाना, और दूसरा और अंतिम चरण चित्र पर कैनवास को ड्राइमेज फ़ंक्शन का उपयोग करना है। आइए दोनों चरणों पर अधिक विस्तार से विचार करें।

एक नई ग्राफिक ऑब्जेक्ट बनाना:

var img = new Image(); //     img.src = 'image.png'; //

वैसे, छवि के स्रोत के रूप में, आप निम्न पंक्ति को निर्दिष्ट कर सकते हैं जिसमें छवि वर्णित है:

 img.src = 'data:image/gif;base64,R0lGODlhDAAMAOYAANPe5Pz//4KkutDb4szY3/b+/5u5z/3//3KWrfn//8rk8naasYGkuszY4Mbg8qG+0dzv9tXg5sTg8t/o7vP8/4iqv9ft9NPe5qfD1Mfc56O/0YKlu+Lr8M3Z4JCwxuj2/Of0+eDz9+rw9Z68z8/n8sHe8sbT3Ju6zuDv96nE1Onw9Nbh6cvX39Hq89Hq8u77/srW3tbh54Kku8ba56TD1u37/vL8/vL8/9ft9ebu8+Ps8bzM1Ymsw7XR4Nnj6Yanvsnj8qrI2Or2/NTf5tvl68vY3+r3/HqdtNji6OXt8eDz+dLc477c7bDO3t7n7d7v9s3Z4dbs9N/y98Pd6PX+/8/b4f7//+Hp7tDo8vv//+fu84GjunKWro6uxHqctOfu9P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAMAAwAAAeEgCJfg4RfWlo5KlpgjI2OOklWBwcBAVmXCQlXHAUFVBkGBjMUNzZOEy81IF2sXUZCH0QrDyhPGzICAkohUj4XHhoQKQsLGDgWUTFIJxUjUy0uWNIkQxE9W9gMDD9BCgpLAEBNXl5H5F40DlUDEkxc71wICDwlDQBQHQ0EBEUsJjswBgQCADs=';

1. ड्राइमेज

अब हम कैनवास पर छवि बनाने के लिए आगे बढ़ेंगे। इसके लिए एक ड्राइमेज फंक्शन है।

 drawImage(image, x, y) //  x  y      ,

यह ध्यान देने योग्य है कि छवि को छवि स्रोत को ऑब्जेक्ट को सौंपा जाने के तुरंत बाद लोड किया जाता है, और यदि यह ड्रा फ़ंक्शन कहे जाने वाले समय तक पूरी तरह से लोड नहीं होता है, तो यह बस कैनवास पर नहीं खींचा जाएगा। इस स्थिति से बचने के लिए, इस डिज़ाइन का उपयोग करें:

 var img = new Image(); //   img.onload = function() { //           /* -  */ } img.src = 'myImage.png'; //

तो हम शायद उस बिंदु पर पहुँच गए जहाँ आप एक प्राथमिक उदाहरण पर विचार कर सकते हैं:

 <!doctype html> <html> <meta charset='utf-8'> <head> <title>imgExample</title> </head> <body> <canvas id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'), //  pic = new Image(); // ""  pic.src = 'http://habrahabr.ru/i/nocopypast.png'; //  ,    pic.onload = function() { //  onLoad,      ctx.drawImage(pic, 0, 0); //       0, 0 } </script> </body> </html>

इस लेख के लिए उदाहरणों के साथ फ़ीड का लिंक।

2. पुल-पुल

लेकिन अगर सब कुछ एक छवि के साथ सरल ड्राइंग तक सीमित था, तो एक अलग लेख नहीं लिखा जा सकता था, लेकिन पिछले पोस्ट में उप-आइटम "छवियां" तक सीमित था। इसलिए अब हम छवि को स्केल करने की कोशिश करेंगे और इसके लिए एक और तरीका है ड्राइमेज फंक्शन को कॉल करना:

 drawImage(image, x, y, width, height) //  width, height

पिछले उदाहरण को लें और ड्राइमेज में कुछ बदलाव करें:

 ctx.drawImage(pic, 0, 0, 300, 150);

इस लेख के लिए उदाहरणों के साथ फ़ीड का लिंक।

3. हम छवि का एक टुकड़ा खींचते हैं

आठ मापदंडों के साथ तीसरा ड्रॉइमेज कॉल कुछ इस तरह दिखता है:

 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); //      // sx, sy, sWidth, sHeight     - // dx, dy, dWidth, dHeight

एक ही उदाहरण लें और ड्राइमेज फ़ंक्शन को तीसरी बार समायोजित करें:

 ctx.drawImage(pic, 25, 42, 85, 55, 0, 0, 170, 110);

इस लेख के लिए उदाहरणों के साथ फ़ीड का लिंक।

4. चुनौती

अब यह सब कुछ समेकित करने के लिए है जो एक व्यावहारिक उदाहरण पर किया गया है। उस उदाहरण में, यह एक छोटा सा नक्शा होगा, न कि केवल कुछ मौजूदा खेल से, बल्कि हमारे द्वारा आविष्कार किया गया है। इसे ठीक से काम करने के लिए, हमें किसी भी ग्राफिक्स एडिटर को टुकड़ों से बनी एक छवि बनाने की आवश्यकता होगी जिसे हमें एक ट्रैक, एक घर और एक समाशोधन आकर्षित करने की आवश्यकता होगी। सामान्य तौर पर, नक्शे के टुकड़े को टाइल कहा जाता है, और जिस फ़ाइल में वे सभी एक छवि में इकट्ठे होते हैं उसे टाइलसेट कहा जाता है। यहां एक तस्वीर है जिसे मैंने उबंटू के तहत पिंटा कार्यक्रम में अपने हाथों से चित्रित किया है।

तो, आयाम 8 से 8 वर्ग ब्लॉक 32 पिक्सेल चौड़ा होगा। मानचित्र पर हमें एक घर और एक मार्ग को चित्रित करना होगा। घर के तत्व पेन से खींचे जाते हैं, आप प्रत्येक ईंट कह सकते हैं। उचित रंग के साथ गुहा को भरने और शोर को जोड़कर घास और रेत बनाया गया था। निश्चित रूप से सब कुछ बहुत आदिम रूप से प्रस्तुत किया जाता है, लेकिन सांकेतिक रूप से।

इस तरह के कोड का एक टुकड़ा चिमटी की एक जोड़ी के साथ विचार करें जैसा कि var map = [[{x: 1, y: 4} ... x और y के मान चित्र से किस तत्व को इंगित करते हैं। यानी यदि मूल ड्राइंग को एक वर्ग 32 × 32 में विभाजित किया जाता है तो यह स्पष्ट हो जाएगा।

और foresample :

 <!doctype html> <html> <meta charset='utf-8'> <head> <title>imgExample</title> </head> <body> <canvas id='example'> </canvas> <script> var example = document.getElementById('example'), //   ctx = example.getContext('2d'), //   cellSize = 32, //      pic = new Image(), // ""  map = //     [ [{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4}], // 1  [{x:1,y:4},{x:1,y:1},{x:2,y:1},{x:3,y:1},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4}], // 2  [{x:1,y:4},{x:1,y:2},{x:2,y:2},{x:3,y:2},{x:1,y:4},{x:1,y:3},{x:1,y:3},{x:1,y:3}], // 3  [{x:1,y:4},{x:3,y:4},{x:2,y:3},{x:3,y:4},{x:1,y:4},{x:1,y:3},{x:1,y:4},{x:1,y:4}], // 4  [{x:1,y:4},{x:3,y:4},{x:2,y:4},{x:3,y:4},{x:1,y:4},{x:1,y:3},{x:1,y:4},{x:1,y:4}], // 5  [{x:1,y:4},{x:1,y:4},{x:1,y:3},{x:1,y:4},{x:1,y:4},{x:1,y:3},{x:1,y:4},{x:1,y:4}], // 6  [{x:1,y:4},{x:1,y:4},{x:1,y:3},{x:1,y:3},{x:1,y:3},{x:1,y:3},{x:1,y:4},{x:1,y:4}], // 7  [{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4}] // 8  ]; //     (x  y )      //    88  example.width = 8 * cellSize; example.height = 8 * cellSize; pic.src = 'https://habrastorage.org/getpro/habr/post_images/e85/727/cb1/e85727cb1a88099325eaf5b243d4c41f.png'; pic.onload = function() { //  onLoad,      for (var j = 0 ; j < 8; j ++) for (var i = 0; i < 8; i ++) //     ''          ctx.drawImage(pic, (map[i][j].x-1)*cellSize, (map[i][j].y-1)*cellSize, 32, 32, j*cellSize, i*cellSize, 32, 32); } </script> </body> </html>

उदाहरण देखें

HTML5 CANVAS कदम से कदम: छवियाँ

1. ड्राइमेज

2. पुल-पुल

3. हम छवि का एक टुकड़ा खींचते हैं

4. चुनौती

More articles: