एक और कैनवस गाइड [4]: ​​अंत

इस भाग में

[परिवर्तन,
रचनाओं
एनीमेशन
पिक्सेल हेरफेर]

परिवर्तन

कुछ तरीकों को याद करें

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

चलिए चलते हैं

translate(float x, float y) 

- पिछली स्थिति से x और y द्वारा उत्पत्ति की वर्तमान स्थिति को स्थानांतरित करें।
निम्नलिखित उदाहरण पर विचार करें:

 ctx.save() //  ctx.translate(100,100) //   ctx.textBaseline = 'top' ctx.font = "bold italic 30px sans-serif" ctx.strokeText(" ",0,0) //     (0;0),        ctx.restore() // ,     ,    

चलिए बारी है

 rotate(float angle) 

- एब्ससिस को चालू करें और कोण कोण द्वारा निर्देशांक करें, यह भी मत भूलना कि कोण को रेडियन में मापा जाता है, कोण को रेडियन में डिग्री से परिवर्तित करने के लिए आपको डिग्री को पाई से गुणा करने और 180 से विभाजित करने की आवश्यकता होती है, अर्थात, रेड = डाउन * मैथ.आई // 180
उदाहरण के लिए, ctx.translate (100,100) लाइन के बाद जोड़ें: ctx.rotate (45 * Math.PI / 180)

कमी / वृद्धि

 scale(float x, float y) 

- x और y अक्षों के लिए एक नया पैमाना लागू करें।
उदाहरण के लिए, ctx.rotate (45 * Math.PI / 180) को ctx.scale (0.65% 1) से बदलें

मैट्रिक्स को गुणा करें

 transform(float m11, float m12, float m21, float m22, float dx , float dy) 

- पुराने मैट्रिक्स को नए मैट्रिक्स से गुणा करता है।

मैट्रिक्स लागू करें

 setTransform(float m11, float m12, float m21, float m22, float dx , float dy) 

- नया मैट्रिक्स लागू करें, उदाहरण के लिए, निम्नलिखित कोड देखें।

 var img = new Image(); img.onload = function(){ ctx.save() ctx.setTransform(1,0.5,0,1,1,1) ctx.drawImage(img,0,0,78,50) ctx.restore() } img.src = 'brick.jpg'; 

मैंने एक ईंट की दीवार की तस्वीर का इस्तेमाल किया और एक परिवर्तन के रूप में कतरनी की ।
इसके अलावा, आप न्यूटोचका से विषय में अधिक विस्तार से परिवर्तनों के बारे में पढ़ सकते हैं

रचनाओं

रचना संचालन के प्रकार

GlobalCompositeOperation संपत्ति कंपोज़िशन ऑपरेशन के प्रकार के लिए ज़िम्मेदार है, इसके सभी संभावित मूल्यों को चित्रित करना संभव होगा, लेकिन एक कैनवस चीट शीट है और इससे चित्र का हिस्सा दिखाने के लिए बेहतर है, नीली आयत पहले खींची गई थी, और लाल घेरा दूसरा है और GlobalCompositeOperation के मूल्य के आधार पर हमें अलग-अलग परिणाम मिलेंगे। ।

GlobalAlpha संपत्ति

GlobalAlpha गुण - वास्तव में, एक ऐसा कारक है जिसके द्वारा प्रत्येक छवि की पारदर्शिता को गुणा किया जाता है, और केवल अगर 0 <= GlobalAlpha <= 1. उदाहरण के लिए, कोड पर विचार करें:

 ctx.globalAlpha = 0.6; ctx.fillRect(0,0,100,100) ctx.fillRect(50,50,100,100) 

एनीमेशन

requestAnimationFrame

यदि पहले टाइमर एनीमेशन के लिए उपयोग किया जाता था, तो अब एक विशेष अनुरोधअनमीकरण फ़ंक्शन दिखाई दिया है, विषय पहले से ही कवर किया गया है, इसलिए azproduction से अनुवाद पढ़ना बेहतर है।

एनीमेशन का मूल सिद्धांत

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

 var x = 400, y = 300; (function loop(){ ctx.clearRect(0,0,800,600); ctx.beginPath(); ctx.arc(x++,y++,50,0,Math.PI*2,false); ctx.fill() requestAnimFrame(loop); })(); 

आप ट्रिक से विषय में एनीमेशन के बारे में भी पढ़ सकते हैं

1 खेल! = 1 कैनवास

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

पिक्सेल में हेरफेर करें

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

पिक्सेल डेटा कैसे संग्रहीत किया जाता है

पिक्सेल डेटा, जैसा कि पहले उल्लेख किया गया है, सरणी में संग्रहीत किया जाता है, जबकि सरणी में तत्वों की संख्या पिक्सेल समय की संख्या 4 के बराबर होती है। सभी तत्व 0..255 की सीमा में मान लेते हैं।
सहित अल्फा चैनल 0..255 से मूल्यों में संग्रहीत है। चित्र दिखाता है कि चार मान r, g, b, एक रूप, एक खंड, खंड, बदले में, एक एकल अविभाज्य सेल है जो एक पिक्सेल के मापदंडों को संग्रहीत करता है।

एक खाली इमेजडाटा बनाना

 ImageData = context.createImageData(int w, int h) 

- क्रमशः चौड़ाई और ऊंचाई w और h के साथ एक खाली ImageData बनाएगा।

 ImageData = context.createImageData(imageData) 

- प्रेषित इमेजडेटा की चौड़ाई और ऊंचाई के साथ एक खाली इमेजडाटा बनाएगा, ध्यान दें: डेटा कॉपी नहीं किया गया है।

ImageData का उपयोग करना

 context.putImageData(imageData imgd, int x, int y) 

- छवि बिंदु की चौड़ाई और ऊंचाई के साथ xy बिंदु से क्षेत्र में पिक्सेल के कैनवास सरणी को बदलें।

सरल उदाहरण है

लेकिन पर्याप्त सिद्धांत, चलो व्यापार के लिए नीचे आते हैं, चलो बिना सुचारू रूप से फ़ंक्शन y = x * x का ग्राफ खींचने की कोशिश करते हैं:

 var imgd = ctx.createImageData(800, 600); var x,y,segment,xround,yround; for (x=-40 ; x<=40 ; x+=0.01) { y = x*x; xround = ~~(x+0.5); yround = ~~(y+0.5); segment = ((-yround+400)*imgd.width + xround + 40)*4; imgd.data[segment+3] = 255; } ctx.putImageData(imgd, 0, 0); 

प्रदर्शन की तुलना करने के लिए, मैंने fillRect का उपयोग करके एक समान कोड लिखा , फिर से jsperf पर, फिर भी, एक बिंदु खींचने के लिए यह fillRect का उपयोग करना बेहतर है क्योंकि imageData बनाने से भी संसाधनों का उपभोग होता है।

पिक्सेल हेरफेर

 ImageData = context.createImageData(int x, int y, int w, int h) 

- क्रमशः (x; y) और चौड़ाई, ऊँचाई w और h पर ऊपरी बाएँ शीर्ष के साथ एक आयताकार क्षेत्र में कैनवास से डेटा के साथ एक इमेजडाटा ऑब्जेक्ट लौटाएगा। उदाहरण के लिए, आइए फोटो में सफेद क्षेत्रों को उजागर करने का प्रयास करें:

 var img = new Image(); img.src = 'test.jpg'; //     img.onload = function(){ //netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); --      FireFox   ctx.drawImage(img, 0, 0, 160, 120); var imgd = ctx.getImageData(0, 0, 160, 120); // imageData for (var i=0 ; i<imgd.data.length ; i+=4) { imgd.data[i] = imgd.data[i+1] = imgd.data[i+2] = imgd.data[i] < 200 && imgd.data[i+1] < 200 && imgd.data[i+2] < 200 ? 0 : 255; //     } ctx.putImageData(imgd, 0, 0); //, ,     }