कॅनव्हास आकार. कॅनव्हास वापरून आकार काढणे. 2D संदर्भामध्ये प्रवेश करत आहे

आज मी तुम्हाला html5 मध्ये कॅनव्हास कसे कार्य करते हे सांगेन? आणि मी उदाहरणे देईन, किमान दोन. कॅनव्हास हा एक टॅग आहे ज्यामध्ये तुम्ही जावास्क्रिप्ट वापरून विविध आकार काढू शकता. हे html5 च्या नवकल्पनांपैकी एक आहे आणि मी आता त्याबद्दल थोडेसे सांगेन.

काढण्याची तयारी करत आहे

तयार करणे सुरू करण्यासाठी, तुम्हाला स्वतः कॅनव्हास तयार करणे आवश्यक आहे आणि त्याच्याशी स्क्रिप्ट देखील जोडणे आवश्यक आहे.

आम्ही कॅनव्हासचे परिमाण तसेच एक अभिज्ञापक सूचित करतो. स्क्रिप्टसह कॅनव्हास कनेक्ट करण्यासाठी हे आवश्यक आहे, जे आम्ही आता करू:

var फील्ड = document.getElementById("field").getContext("2d");

चला ही ओळ फील्ड व्हेरिएबलवर लिहू; ती तुम्हाला विविध पद्धती वापरून कॅनव्हासच्या आत काढण्यास अनुमती देईल. तर आता आपण चित्र काढण्याचा प्रयत्न करू शकतो. सोयीसाठी, मी कॅनव्हासची पार्श्वभूमी पिवळी बनवीन, पांढरी नाही, जेणेकरून सर्व इंडेंट स्पष्टपणे दिसतील.

कॅनव्हास (पार्श्वभूमी: पिवळा;)

उदाहरण 1 - न भरता आयत

आता आपल्याकडे फील्ड व्हेरिएबल आहे आणि विविध पद्धती वापरून आपण कॅनव्हास कंटेनरच्या आत काढू शकतो. सर्व प्रथम, आपण ओळीची जाडी तसेच त्याचा रंग समायोजित करू शकता, हे खालील ओळी वापरून केले जाते:
field.lineWidth = 4;
field.strokeStyle = "#173045";

छान, पॅरामीटर्स सेट केले आहेत. आता रेखांकन प्रत्यक्षात कसे घडते हे समजून घेणे आपल्यासाठी महत्त्वाचे आहे. हे या तत्त्वानुसार घडते: एक x समन्वय आहे, तो कॅनव्हासच्या सुरूवातीस सुरू होतो आणि उजवीकडे सरकतो, आणि एक y समन्वय देखील आहे, तो कंटेनरच्या सुरूवातीस देखील सुरू होतो, परंतु खाली जातो. हे अधिक चांगल्या प्रकारे समजून घेण्यास मदत करण्यासाठी, हे चित्र पहा:

आणि आयत काढणे कसे होते? ऑफसेट नेहमी प्रथम x समन्वयासह सेट केला जातो आणि नंतर y समन्वयासह. ही प्रारंभिक स्थिती सेट केल्यानंतर, तुम्हाला फक्त आयताची रुंदी आणि उंची निर्दिष्ट करण्याची आवश्यकता आहे. प्रथम रुंदी आणि नंतर उंची. चला पाहूया:
field.strokeRect(80, 90, 120, 70);
परिणाम:

येथे कंसातील पहिला पॅरामीटर x ऑफसेट आहे, दुसरा y ऑफसेट आहे, तिसरा रुंदी आहे आणि चौथा उंची आहे. तेच, आयत काढण्यासाठी हे पुरेसे लक्षात ठेवा.

उदाहरण 2 - भरणासह आयत

या प्रकरणात, सर्व काही त्याच प्रकारे केले जाते, केवळ पद्धतीचे नाव बदलते:
field.fillStyle = "#173045";
field.fillRect(50, 50, 130, 85);
फिलस्टाइल पद्धत तुम्हाला फिल रंग निर्दिष्ट करण्यास अनुमती देते. मी आमचे पूर्वीचे आयत आत्तासाठी हटवले आहे, नवीन असे दिसते:


जसे आपण पाहू शकता, सर्व 4 पॅरामीटर्स समान क्रमाने सेट केले आहेत. तुम्ही पहिली दोन मूल्ये शून्यावर सेट केल्यास, कॅनव्हासच्या वरच्या डाव्या कोपर्यात आयत काढला जाईल.

उदाहरण 3 - रेषा आणि जटिल आकार

आपण समजून घेतल्याप्रमाणे, वर वर्णन केलेल्या पद्धती जटिल आकार तयार करण्यासाठी योग्य नाहीत. कॅनव्हासवर त्रिकोण काढू. हे पहिल्या दृष्टीक्षेपात दिसते तितके अवघड नाही.
रेखांकनाची सुरुवात दर्शविण्यासाठी beginPath() पद्धत आवश्यक आहे कोणतीही आकृती. moveTo() पद्धत रेखांकनासाठी प्रारंभिक समन्वय सेट करते. जसे तुम्ही समजता, त्यात दोन पॅरामीटर्स आहेत - x आणि y समन्वय. तर, रेखाचित्र तयार करण्यासाठी जटिल आकृतीआपल्याला कोडच्या या ओळींची आवश्यकता आहे:
field.beginPath();
field.moveTo(३०, ३०);

उदाहरणार्थ, मी कॅनव्हासच्या वरच्या डाव्या कोपर्यात उजवीकडे आणि तळाशी 30 पिक्सेल बिंदूपासून त्रिकोण काढणे सुरू करेन. रेखाचित्र, lineTo() पद्धत वापरून केले जाते:

Field.beginPath(); field.moveTo(३०, ३०); field.lineTo(150, 100); field.lineTo(250, 30); field.closePath(); field.lineWidth = 3; field.strokeStyle = "चांदी" field.stroke();

मी येथे बरेच कोड जमा केले आहेत, परंतु आता आपण निकाल पहात असताना मी सर्वकाही स्पष्ट करेन:

जसे आपण पाहू शकता, तो एक त्रिकोण आहे. आम्ही आमच्या सुरुवातीच्या बिंदूपासून शेवटच्या बिंदूपर्यंत एक रेषा काढली, जी येथे आहे निर्दिष्ट निर्देशांक: x अक्षाच्या बाजूने कॅनव्हासच्या सुरुवातीपासून 150 पिक्सेल आणि y अक्षाच्या बाजूने सुरुवातीपासून 100 पिक्सेल. सर्व निर्देशांक कॅनव्हासच्या वरच्या डाव्या किनारीशी संबंधित आहेत, रेषा जिथे संपते तिथे नाही. हे लक्षात ठेवा, कारण ते त्वरित समजून घेणे सोपे करते आणि आपण आधीच आपल्या डोक्यात परिणामाची कल्पना करू शकता.

वास्तविक, closePath() पद्धत आकृती काढणे पूर्ण करते. इतर पॅरामीटर्स:
lineWidth = 3; — ओळ जाडी 3 पिक्सेल;
strokeStyle = "चांदी"; - रेषेचा रंग चांदीचा आहे;
स्ट्रोक (); - लक्ष द्या! या पद्धतीशिवाय, शेवटी आपल्या रेषा दिसणार नाहीत आणि त्रिकोण दिसणार नाही. म्हणून, आम्ही निश्चितपणे नोंदणी करतो.

बरं, आताची ही सर्व उदाहरणे आहेत. मला आशा आहे की त्यांनी तुम्हाला HTML5 मधील रेखांकनाच्या मूलभूत गोष्टींशी परिचित होण्यास मदत केली आहे. कोणत्याही प्रश्नांसाठी, टिप्पण्यांमध्ये लिहा.

कॅनव्हासमध्ये कसे काढायचे याच्या तपशीलात आपण जाऊ शकतो. या लेखाच्या शेवटी, तुम्ही आयत, त्रिकोण, रेषा, चाप आणि वक्र कसे काढायचे ते शिकाल, जर तुम्हाला मूलभूत गोष्टींशी परिचित असेल. भौमितिक आकार. कॅनव्हासवर वस्तू रेखाटताना पथांसह कार्य करणे खूप महत्वाचे आहे आणि हे कसे करता येईल ते आपण पाहू.

नेट

आम्ही रेखांकन सुरू करण्यापूर्वी, आम्हाला कॅनव्हास ग्रिड किंवा समन्वय समतल बद्दल बोलणे आवश्यक आहे. पासून आमचे HTML फ्रेमवर्क मागील पृष्ठ 150 पिक्सेल रुंद आणि 150 पिक्सेल उंच कॅनव्हास घटक समाविष्ट केला आहे. उजवीकडे तुम्ही हा कॅनव्हास डीफॉल्ट ग्रिड आच्छादनासह पाहू शकता. सामान्यत: ग्रिडवरील 1 युनिट कॅनव्हासवरील 1 पिक्सेलशी संबंधित असते. या ग्रिडचे मूळ स्थान आहे वरच्या डाव्या कोपर्यातसमन्वय मध्ये ( 0,0) . सर्व घटक या उत्पत्तीशी संबंधित आहेत. तर, निळ्या चौकोनाच्या वरच्या डाव्या कोपऱ्याची स्थिती आहेएक्स डाव्या बाजूला पिक्सेल आणियेथे वरून पिक्सेल, समन्वयावर (एक्स, y)

. नंतर या ट्युटोरियलमध्ये आपण मूळ स्थान वेगळ्या ठिकाणी कसे हलवू शकतो, ग्रिड फिरवू शकतो आणि त्याचे स्केल देखील कसे करू शकतो ते पाहू, परंतु सध्या आपण डीफॉल्ट ग्रिड सेटिंग्जसह चिकटून राहू.कॅनव्हास एक ड्रॉइंग API आहे जो नुकताच HTML मध्ये जोडलेला आहे आणि बहुतेक ब्राउझरद्वारे समर्थित आहे (अगदी इंटरनेट एक्सप्लोरर 9). कॅनव्हास तुम्हाला फ्लॅश किंवा जावा सारखे प्लगइन न वापरता ब्राउझरमध्ये तुम्हाला हवे ते रेखाटण्याची परवानगी देतो. त्याच्या फसवणुकीसह कॅनव्हास

साधे API

केवळ डेस्कटॉपसाठीच नव्हे तर सर्व उपकरणांसाठी वेब अनुप्रयोगांच्या निर्मितीमध्ये क्रांती घडवू शकते.

हे स्क्रीनशॉट तुम्हाला कॅनव्हास काय करू शकतात याची चव देतील.

कॅनव्हास म्हणजे काय?

कॅनव्हास - 2D रेखांकनासाठी API. मूलत: ब्राउझर तुम्हाला स्क्रीनवर एक आयताकृती क्षेत्र देतो ज्यामध्ये तुम्ही रेषा, आकार, प्रतिमा, मजकूर, तुम्हाला हवे असलेले बरेच काही काढू शकता. कॅनव्हास हे मूलतः ऍपलने त्यांच्या विजेट्ससाठी तयार केले होते, परंतु त्यानंतर ते सर्व प्रमुख ब्राउझर डेव्हलपरने स्वीकारले आहे आणि कॅनव्हास आता HTML5 तपशीलाचा भाग आहे. काही कॅनव्हास कोड कसा दिसतो याचे एक लहान उदाहरण येथे आहे:

var canvas = document.getElementById("canvas");

var c = canvas.getContext("2d");

c.fillStyle = "लाल";

c.fillRect(100,100,400,300); हा आयत context.fillRect() फंक्शनने काढला आहे.हे समजून घेणे महत्त्वाचे आहे की कॅनव्हास पिक्सेलने काढण्यासाठी डिझाइन केलेले आहे. त्यात कोणतेही आकार किंवा वेक्टर नाहीत. इव्हेंट हँडलर्सना बांधण्यासाठी कोणतीही वस्तू नाहीत. ही स्क्रीनवर फक्त पिक्सेल रेखाचित्रे आहेत. जसे आपण नंतर पाहू, यात सामर्थ्य आणि कमकुवतपणा दोन्ही आहे.

CSS खरोखर स्टाइलिंग घटकांबद्दल आहे. DOM मध्ये कॅनव्हासमध्ये काढलेल्या कोणत्याही वस्तू नसल्यामुळे, तुम्ही त्यांना शैली देण्यासाठी CSS वापरू शकत नाही. CSS फक्त कॅनव्हासच्याच आयताकृती क्षेत्रावर परिणाम करेल, त्यामुळे तुम्ही सीमा, पार्श्वभूमी रंग सेट करू शकता आणि तेच.

DOM द्वारे ॲनिमेशन: DOM किंवा डॉक्युमेंट ऑब्जेक्ट मॉडेल ( ऑब्जेक्ट मॉडेलदस्तऐवज) स्क्रीनवरील प्रत्येक ऑब्जेक्ट परिभाषित करते. सह ॲनिमेशन CSS वापरूनकिंवा वस्तू हलविण्याकरिता JavaScript काही प्रकरणांमध्ये कॅनव्हास द्वारे केले जाण्यापेक्षा नितळ असू शकते, परंतु हे आपल्या ब्राउझरच्या अंमलबजावणीवर अवलंबून असते.

काय? कुठे? कधी?

तर, SVG, CSS किंवा DOM घटकांऐवजी तुम्ही कॅनव्हास कधी वापरावा? बरं, कॅनव्हास इतरांपेक्षा खालच्या पातळीचा आहे, म्हणून तुमचे रेखाचित्रांवर अधिक नियंत्रण आहे आणि कमी मेमरी वापरा, परंतु त्या बदल्यात तुम्हाला लिहावे लागेल. अधिक कोड. तुम्हाला स्क्रीनवर प्रदर्शित करायचे असलेले आकार, जसे की नकाशामध्ये तयार केलेले आकार असतील तेव्हा SVG वापरा Adobe Illustrator. तुम्हाला ॲनिमेट करण्याची किंवा 3D रूपांतरे वापरण्याची तुमच्या इच्छा असलेल्या मोठ्या स्थिर क्षेत्रे असल्यावर CSS किंवा DOM ॲनिमेशन वापरा. आकृत्या, आलेख, डायनॅमिक डायग्राम आणि अर्थातच व्हिडिओ गेमसाठी, कॅनव्हास आहे सर्वोत्तम निवड. पुढे जाताना, आम्ही अनेक लायब्ररींवर चर्चा करू ज्या तुम्हाला कॅनव्हास वापरून अधिक वेक्टर- आणि ऑब्जेक्ट-ओरिएंटेड गोष्टी करू देतात.

आम्ही पुढे जाण्यापूर्वी, मला हे स्पष्ट करायचे आहे की जेव्हा मी कॅनव्हासबद्दल बोलतो तेव्हा मला द्विमितीय API म्हणायचे आहे. WebGL नावाच्या कामांमध्ये 3D API देखील आहे. मी याबद्दल बोलणार नाही कारण ते अद्याप विकासात आहे आणि त्यासाठी ब्राउझर समर्थन खूपच खराब आहे. तसेच हे मूलत: JavaScript मधील OpenGL कॅनव्हास पेक्षा खालच्या स्तरावर आहे आणि वापरणे अधिक कठीण आहे. जसजसे WebGL अधिक परिपक्व होत जाईल, तसतसे आम्ही भविष्यातील अध्यायांमध्ये परत येऊ.

ब्राउझर समर्थन

शेवटी, कॅनव्हाससह काम करण्याआधी, आपण ते कोठे वापरू शकता याबद्दल बोलूया. सुदैवाने कॅनव्हास आता एक स्थिर API आहे आणि बहुतेक आधुनिक ब्राउझरकाही प्रमाणात समर्थन करा. हे अगदी आवृत्ती 9 पासून इंटरनेट एक्सप्लोररला समर्थन देते आणि खूप चांगले.

9	10	9	3	4

बहुतेक मोबाइल प्लॅटफॉर्म कॅनव्हासला सपोर्ट करतात कारण ते प्रामुख्याने वेबकिटवर आधारित आहेत, ज्याच्याकडे आहे चांगला आधार. webOS, iOS, Android कशाला सपोर्ट करते हे मला माहीत आहे. मला वाटते की ब्लॅकबेरी देखील त्यानुसार किमान, PlayBook वर. विंडोज फोन 7 यास समर्थन देत नाही, परंतु हे भविष्यातील अपडेटमध्ये बदलू शकते.

iOS	webOS	Android	ब्लॅकबेरी	विंडोज फोन 7
सर्व	सर्व	2	प्लेबुक आणि OS 6.0

अजून सर्व नाही मोबाइल उपकरणेपूर्ण किंवा समाविष्ट आहे जलद समर्थनकॅनव्हास, म्हणून आम्ही नंतर मोबाइलसाठी आमचा कोड कसा ऑप्टिमाइझ करायचा ते पाहू.

साधे रेखाचित्र

मी आधी म्हटल्याप्रमाणे, कॅनव्हास फक्त एक API आहे. तुम्ही यापूर्वी Flash किंवा Java 2D प्रोग्रामिंगसह कोणतेही काम केले असल्यास, हे खूपच परिचित वाटले पाहिजे. तुम्हाला ग्राफिक्स संदर्भासाठी एक पॉइंटर मिळेल, काही गुणधर्म सेट करा जसे की वर्तमान भरणे किंवा बाह्यरेखा रंग, आणि नंतर काही आकार काढा. येथे काही उदाहरणे आहेत.

IN या उदाहरणातआम्ही वर्तमान रंग लाल वर सेट करतो आणि एक आयत काढतो. मूल्ये बदलण्यासाठी कोडमधील संख्या ड्रॅग करा आणि त्याचा आयतावर कसा परिणाम होतो ते पहा.

Ctx.fillStyle = "लाल"; //x, y, रुंदी, उंची ctx.fillRect(20,30,40,50);

येथे आणखी एक आहे.

C.fillStyle = "#ccddff"; c.beginPath(); c.moveTo(50,20); c.lineTo(200,50); c.lineTo(150 ,80); c.closePath(); c.fill(); c.strokeStyle = "rgb(0,128,0)"; c.lineWidth = 5 ; c.stroke();

या उदाहरणात, आम्ही सध्याचा फिल कलर सेट करतो, एक बाह्यरेखा तयार करतो आणि नंतर तो भरतो आणि स्ट्रोक करतो. हे लक्षात घ्यावे की संदर्भ फिल कलर आणि स्ट्रोक कलर स्वतंत्रपणे ट्रॅक करतो. हे देखील लक्षात ठेवा विविध आकाररंग संकेत. fillStyle आणि strokeStyle कोणत्याही वैध CSS रंग असू शकतात, जसे की हेक्साडेसिमल, नाव किंवा rgb() फंक्शन.

रूपरेषा

कॅनव्हास केवळ आयताला थेट समर्थन देतो. इतर कोणताही आकार काढण्यासाठी, आपल्याला आकृती वापरून ते स्वतः करावे लागेल. बाह्यरेखा म्हणजे सरळ किंवा वक्र रेषाखंडांच्या समूहाने तयार केलेले आकार. कॅनव्हासमध्ये तुम्हाला बिगिनपथ() द्वारे पथ परिभाषित करणे आवश्यक आहे, नंतर ते भरा किंवा मास्क म्हणून वापरा. तुम्ही प्रत्येक ओळ MoveTo(), lineTo() आणि bezierCurveTo() सारख्या फंक्शन्ससह परिभाषित करता. या उदाहरणात, moveTo() वापरून आकार काढला आहे, त्यानंतर बेझियर वक्र आणि काही रेषा आहेत. बाह्यरेखा तयार केल्यानंतर, ते भरले जाते आणि बाह्यरेखा तयार केली जाते.

C.fillStyle = "लाल"; c.beginPath(); c.moveTo(10,30); c.bezierCurveTo(50 ,90 ,159 ,-30 ,200,30); c.lineTo(200,90); c.lineTo(10,90); c.closePath(); c.fill(); c.lineWidth = 4; c.strokeStyle = "काळा"; c.stroke();

समन्वय प्रणालीबद्दल काही शब्द. कॅनव्हास वरच्या डाव्या कोपऱ्यातून y-अक्ष खाली निर्देशित करते. या साठी पारंपारिक आहे संगणक ग्राफिक्स, परंतु जर तुम्हाला वेगळा संदर्भ बिंदू निर्दिष्ट करायचा असेल, तर तुम्ही हे परिवर्तनाद्वारे करू शकता, ज्याबद्दल आम्ही नंतर बोलू. दुसरी महत्त्वाची गोष्ट म्हणजे स्पेसिफिकेशन डावीकडील निर्देशांक परिभाषित करते वरचा कोपरापिक्सेल याचा अर्थ असा की जर तुम्ही 5.0 ने सुरू होणारी एक पिक्सेल रुंदीची उभी रेषा काढली, तर ती प्रत्यक्षात जवळपासच्या अर्ध्या पिक्सेलला (4.5 ते 5.5) कव्हर करते. यावर जाण्यासाठी, तुमचे x निर्देशांक 0.5 ने शिफ्ट करा. मग हे तुम्हाला 5.0 ते 6.0 पर्यंत जाणारी एक ओळ देईल. वैकल्पिकरित्या, तुम्ही 2 किंवा 4 निर्दिष्ट करून ओळीची रुंदी वापरू शकता.

प्रतिमा

कॅनव्हास ड्रॉइमेज फंक्शनद्वारे प्रतिमा आउटपुट करू शकतो.

ड्रॉइमेजचे अनेक प्रकार आहेत. तुम्ही प्रतिमा थेट स्क्रीनवर सामान्य स्केलवर काढू शकता किंवा तुमच्या आवडीनुसार ताणून क्रॉप करू शकता. गेममध्ये स्पेशल इफेक्ट्स तयार करण्यासाठी इमेज क्रॉप आणि स्ट्रेच करणे खूप उपयुक्त ठरू शकते कारण इमेज इंटरपोलेशन हे इतर प्रकारच्या स्केलिंगपेक्षा बरेच जलद असते.

Ctx.drawImage(img, 0,0); //सामान्य रेखाचित्र ctx.drawImage(img, //draw stretched 0,0,66,66, //source (x,y,w,h) 100,0,103 ,100 //गंतव्य (x,y,w,h) )); ctx.drawImage(img, // एक स्लाइस काढा 20 ,10 ,20 ,20 , // स्त्रोत कॉर्ड्स (x,y,w,h) 250,0,250,50 // destination coords (x,y,w,h) );

स्ट्रेचिंग आणि ट्रिमिंग कसे कार्य करते हे पाहण्यासाठी व्हेरिएबल्स बदलून पहा. प्रतिमा ताणण्यासाठी तुम्ही स्त्रोत आणि गंतव्य निर्देशांक निर्दिष्ट करणे आवश्यक आहे. स्त्रोत निर्देशांक चित्रातून कोणते पिक्सेल घ्यायचे ते drawImage ला सांगतात. वरील प्रतिमा 67x67 पिक्सेल असल्याने, 0,0,66,66 वापरल्याने संपूर्ण प्रतिमा प्रदर्शित होईल. स्क्रीनवर पिक्सेल कुठे ठेवायचे हे अंतिम निर्देशांक drawImage ला सांगतात. w आणि h ची व्हॅल्यू बदलून तुम्ही इमेज स्ट्रेच आणि कॉम्प्रेस करू शकता.

क्रॉपिंग सारखेच कार्य करते, परंतु मूळ निर्देशांक वापरतात, जे संपूर्ण प्रतिमा कव्हर करत नाहीत. जेव्हा तुम्ही एखाद्या प्रतिमेचा तुकडा घेता, तेव्हा तुम्ही त्याच्या मूळ सीमांच्या पलीकडे जात नाही याची खात्री करा, अन्यथा प्रतिमा अदृश्य होईल.

मजकूर

कॅनव्हास देखील मजकूर काढू शकतो. फॉन्ट विशेषता CSS समकक्ष प्रमाणेच आहेत, त्यामुळे तुम्ही फॉन्ट शैली, आकार आणि कुटुंब सेट करू शकता. लक्षात घ्या की fillText(string,x,y) फंक्शन वापरते बेसलाइनमजकूर, त्याची वरची धार नाही. तुम्ही तुमचा मजकूर 0,0 वर ठेवल्यास तो स्क्रीनच्या वरच्या बाजूला काढला जाईल. त्यामुळे योग्य मूल्याने y कमी करा.

Ctx.fillStyle = "काळा"; ctx.font = "इटालिक" +96 +"pt एरियल"; ctx.fillText("हा मजकूर आहे", 20 ,150);

ग्रेडियंट

कॅनव्हास रंगाऐवजी ग्रेडियंटने आकार भरू शकतो. येथे रेखीय ग्रेडियंट:

200,0); grad.addColorStop(0, "पांढरा"); grad.addColorStop(0.5, "लाल"); grad.addColorStop(1, "काळा"); ctx.fillStyle = ग्रॅड; ctx.fillRect(0,0,400,200);

हे लक्षात घेणे महत्त्वाचे आहे की आकृती ज्याप्रमाणे काढली आहे त्याच समन्वय प्रणालीमध्ये ग्रेडियंट रंगवलेला आहे, आकृतीच्या अंतर्गत निर्देशांकांमध्ये नाही. या उदाहरणात, आकार 0.0 वर काढला आहे. जर आपण आकार बदलून 100,100 केला, तर ग्रेडियंट अद्याप स्क्रीनच्या सुरूवातीस असेल, म्हणून तो एक लहान ग्रेडियंट असेल, जसे की:

Var grad = ctx.createLinearGradient(0,0,200,0);

grad.addColorStop(0, "पांढरा");

grad.addColorStop(0.5, "लाल"); grad.addColorStop(1, "काळा"); ctx.fillStyle = ग्रॅड; ctx.fillRect(100,100,400,200);तर, जर तुम्हाला असे वाटते की तुम्ही ग्रेडियंटने आकार भरत आहात, परंतु तुम्हाला एकच रंग दिसतो, तुमचे निर्देशांक बंद असल्यामुळे असे होऊ शकते. रेखांकनाच्या सर्व मूलभूत गोष्टी आहेत. चला तिथेच थांबू आणि पुढच्या अध्यायात काही व्यायाम करू. आपल्याकडे आधीपासूनच ब्राउझर स्थापित केलेला असणे आवश्यक आहे आणिमजकूर संपादक

. मी वापरण्याची शिफारस करतो क्रोम, कारण त्यात समाविष्ट आहे चांगली साधनेडीबगिंग आणि jEdit कारण ते विनामूल्य आणि क्रॉस-प्लॅटफॉर्म आहे. परंतु आपण आपल्या इच्छेनुसार ब्राउझर आणि संपादक वापरू शकता. HTML 5 तपशीलामध्ये अनेक नवीन वैशिष्ट्ये समाविष्ट आहेत, त्यापैकी एक कॅनव्हास टॅग आहे. HTML 5 Canvas (HTML 5 Canvas) एक साधे आणिशक्तिशाली मार्ग

पासून ग्राफिक्स आउटपुट आणि रेखाचित्र

JavaScript वापरून JavaScript मूलभूतबऱ्यापैकी उच्च पातळीवर.

कॅनव्हास मूलभूत

कॅनव्हास संदर्भ तयार करण्यासाठी, फक्त HTML दस्तऐवजात एक घटक जोडा:

ब्राउझर कॅनव्हासला सपोर्ट करत नसल्यास दर्शविण्यासाठी पर्यायी सामग्री.

तुम्हाला कॅनव्हास घटकामध्ये एक अभिज्ञापक जोडण्याची आवश्यकता आहे जेणेकरुन तुम्ही नंतर JavaScript मध्ये त्याचा संदर्भ घेऊ शकता आणि कॅनव्हास घटकाची रुंदी आणि उंची परिभाषित करण्यासाठी तुम्हाला रुंदी आणि उंची गुणधर्म सेट करणे देखील आवश्यक आहे.

कॅनव्हास घटकाच्या आत काढण्यासाठी, तुम्हाला JavaScript वापरण्याची आवश्यकता आहे. प्रथम तुम्हाला getElementById फंक्शन वापरून तयार केलेला कॅनव्हास टॅग शोधण्याची आवश्यकता आहे, आणि नंतर इच्छित संदर्भ सुरू करा. एकदा हे पूर्ण झाल्यावर, तुम्ही निवडलेल्या संदर्भातील उपलब्ध API कमांड वापरून कॅनव्हासवर चित्र काढण्यास सुरुवात करू शकता. खालील स्क्रिप्ट कॅनव्हासवर एक साधा आयत काढते():

// आयडीद्वारे कॅनव्हास घटकाचा संदर्भ मिळवा. var elem = document.getElementById("myCanvas"); // प्रवेशयोग्यतेसाठी नेहमी गुणधर्म आणि पद्धती तपासा मागास सुसंगतताजुन्या ब्राउझरसह जर (elem && elem.getContext) ( // 2D संदर्भ मिळवा. // लक्षात ठेवा: तुम्ही प्रति घटक var संदर्भ = elem.getContext("2d"); असल्यास (संदर्भ) ( //) फक्त एक संदर्भ आरंभ करू शकता आता आपण एक आयत काढतो, निर्देशांक (x,y), तसेच त्याची रुंदी आणि उंची निर्दिष्ट करतो.fillRect(0, 0, 150, 100);

Canvas 2D API शेप फिल आणि बॉर्डर्स

fillStyle आणि strokeStyle गुणधर्मांसह, तुम्ही वस्तूंच्या फिल आणि ओळींसाठी वापरलेले रंग सहजपणे सानुकूलित करू शकता. या पद्धतींमध्ये वापरलेली रंग मूल्ये CSS प्रमाणेच आहेत: हेक्साडेसिमल कोड(#F5E6AB), rgb(), rgba() किंवा अगदी hsla(), जर ब्राउझर रंग निर्दिष्ट करण्याच्या या पद्धतीला समर्थन देत असेल (उदाहरणार्थ, ते Opera 10.00 आणि नवीन आवृत्त्यांमध्ये समर्थित आहे).

fillRect पद्धतीचा वापर करून, आपण भरणासह आयत काढू शकता. स्ट्रोकरेक्ट पद्धतीने तुम्ही फक्त किनारी असलेला आयत काढू शकता, भराव नाही. जर तुम्हाला कॅनव्हासचा काही भाग साफ करायचा असेल तर तुम्ही clearRect पद्धत वापरू शकता. या तीन पद्धती वितर्कांचा समान संच वापरतात: x, y, रुंदी, उंची. पहिले दोन वितर्क निर्देशांक (x,y) निर्दिष्ट करतात आणि पुढील दोन आयताची रुंदी आणि उंची निर्दिष्ट करतात.

रेषेची जाडी बदलण्यासाठी तुम्ही lineWidth गुणधर्म वापरू शकता. fillRect, strokeRect, clearRect फंक्शन्स वापरण्याचे उदाहरण:

Context.fillStyle = "#00f"; // blue context.strokeStyle = "#f00"; // red context.lineWidth = 4; // काही आयत काढा. context.fillRect(0, 0, 150, 50); context.strokeRect(0, 60, 150, 50); context.clearRect(30, 25, 90, 60); context.strokeRect(30, 25, 90, 60);

हे उदाहरण खालील आउटपुट तयार करेल:

वर्तुळ आणि वर्तुळ

वर्तुळ काढण्यासाठी, तुम्हाला खालील कोड चालवावा लागेल:

Context.beginPath(); context.arc(75, 75, 10, 0, Math.PI*2, true); context.closePath(); context.fill(); // जर तुम्हाला वर्तुळ हवे असेल तर तुम्ही वर्तुळ भरू शकता

बेझियर वक्र

HTML5 कॅनव्हासमध्ये बेझियर वक्र तयार करण्यासाठी, तुम्ही bezierCurveTo() पद्धत वापरू शकता. बेझियर वक्र प्रारंभ बिंदू, दोन नियंत्रण बिंदू आणि वापरून परिभाषित केले जातात शेवटचा बिंदू. चतुर्भुज वक्रांच्या विपरीत, HTML 5 कॅनव्हासमधील बेझियर वक्र दोन द्वारे परिभाषित केले जातात नियंत्रण बिंदूफक्त एक ऐवजी, तुम्हाला अधिक जटिल बाह्यरेषेसह वक्र तयार करण्याची अनुमती देते.

bezierCurveTo() पद्धत यासारखी दिसते:

Context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

एचटीएमएल 5 कॅनव्हासमध्ये बेझियर वक्र रेखाटण्याचे उदाहरण:

Window.onload = function())( var canvas = document.getElementById("myCanvas"); var संदर्भ = canvas.getContext("2d"); context.moveTo(188, 130); var controlX1 = 140; var controlY1 = 10 ; var controlX2 = 170; संदर्भात

हा कोड कार्यान्वित केल्याने पुढील परिणाम प्राप्त होतील:

बेझियर वक्र बांधण्यासाठी योजना:

रूपरेषा

कॅनव्हास बाह्यरेखा आपल्याला कोणत्याही आकाराचे आकार काढण्याची परवानगी देतात. प्रथम आपल्याला "फ्रेम" काढण्याची आवश्यकता आहे, आणि नंतर आवश्यक असल्यास आपण रेखा शैली किंवा भरणे वापरू शकता. पथ रेखाटणे सुरू करण्यासाठी, बिगिनपथ() पद्धत वापरली जाते, त्यानंतर एक मार्ग काढला जातो, ज्यामध्ये रेषा, वक्र आणि इतर आदिम घटक असू शकतात. एकदा तुम्ही आकार रेखाटणे पूर्ण केल्यावर, आकार रेखाटणे पूर्ण करण्यासाठी closePath() फंक्शनला कॉल करण्यापूर्वी तुम्ही लाईन स्टाइल कॉल करू शकता आणि पद्धती भरू शकता.

खालील कोडत्रिकोण काढण्याचे प्रात्यक्षिक:

// फिल आणि लाइन गुणधर्म सेट करा. context.fillStyle = "#00f"; context.strokeStyle = "#f00"; context.lineWidth = 4; context.beginPath(); // वरच्या डाव्या बिंदूपासून त्रिकोण काढणे सुरू करा. context.moveTo(10, 10); // निर्देशांक (x,y) संदर्भात हलवा.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); // फिल सह आकार भरा आणि ओळी लागू करा // यापैकी किमान एक पद्धत कॉल करेपर्यंत आकार प्रदर्शित केला जाणार नाही. context.fill(); context.stroke(); context.closePath();

हे उदाहरण ब्राउझरमध्ये याप्रमाणे प्रदर्शित केले जाईल:

कॅनव्हासमध्ये प्रतिमा समाविष्ट करणे

drawImage पद्धत तुम्हाला कॅनव्हासवर इतर प्रतिमा (img आणि canvas) घालण्याची परवानगी देते. IN ऑपेरा ब्राउझरकॅनव्हास घटकामध्ये SVG प्रतिमा काढणे देखील शक्य आहे. सुंदर प्रतिमा काढा जटिल पद्धत, जे तीन, पाच किंवा नऊ युक्तिवाद घेऊ शकतात:

• तीन युक्तिवाद: मूलभूत वापर drawImage पद्धतीमध्ये कॅनव्हासवर काढलेली प्रतिमा निर्दिष्ट करण्यासाठी एक युक्तिवाद आणि निर्देशांक निर्दिष्ट करण्यासाठी दोन युक्तिवाद समाविष्ट आहेत.
• पाच युक्तिवाद: समाविष्ट केलेल्या प्रतिमेची रुंदी आणि उंची सेट करण्यासाठी मागील तीन युक्तिवाद वापरा आणि आणखी दोन वापरा (जर तुम्हाला समाविष्ट करताना प्रतिमेचा आकार बदलायचा असेल).
• नऊ वितर्क: मागील पाच वितर्क वापरते आणि आणखी चार: दोन आतील क्षेत्राच्या निर्देशांकांसाठी मूळ प्रतिमाआणि कॅनव्हासमध्ये पेस्ट करण्यापूर्वी प्रतिमा क्रॉप करण्यासाठी मूळ प्रतिमेच्या आतील क्षेत्राच्या रुंदी आणि उंचीसाठी दोन.

एचटीएमएल 5 स्पेसिफिकेशन खालीलप्रमाणे या युक्तिवादांचे स्पष्टीकरण देते:

इमेजडेटा पद्धतीच्या सामर्थ्याने तुम्ही बरेच काही करू शकता. उदाहरणार्थ, तुम्ही इमेज फिल्टर करू शकता किंवा गणितीय व्हिज्युअलायझेशन (फ्रॅक्टल्स इ.) तयार करू शकता. खालील कोड इमेजचा रंग उलटा करण्यासाठी एक साधा फिल्टर कसा तयार करायचा ते दाखवतो:

// दिलेल्या निर्देशांक आणि परिमाणांवर CanvasPixelArray प्रकाराचा ॲरे मिळवा. var imgd = context.getImageData(x, y, रुंदी, उंची); var pix = imgd.data; // प्रतिमेतील सर्व पिक्सेलमधून पुनरावृत्ती करा आणि रंग उलटा. साठी (var i = 0, n = pix.length; i< n; i += 4) { pix[i] = 255 - pix[i]; // красный канал pix = 255 - pix; // зеленый канал pix = 255 - pix; // синий канал // i+3 - номер элемента, содержащий альфа канал } // Отрисовать объект ImageData в заданных координатах (x,y). context.putImageData(imgd, x, y);

खाली प्रतिमेवर लागू केलेल्या इनव्हर्ट कलर फिल्टरचा परिणाम आहे.

मजकूर

सध्या Text API फक्त मध्ये उपलब्ध आहे नवीनतम बिल्डवेबकिट इंजिन, तसेच फायरफॉक्स 3.1 आणि उच्च.

संदर्भ ऑब्जेक्टसाठी खालील मजकूर गुणधर्म उपलब्ध आहेत:

• फॉन्ट: CSS मधील फॉन्ट-फॅमिली प्रॉपर्टी प्रमाणेच मजकूराचा फॉन्ट परिभाषित करते)
• textAlign: परिभाषित करते क्षैतिज संरेखनमजकूर वैध मूल्ये: प्रारंभ, शेवट, डावीकडे, उजवीकडे, मध्यभागी. डीफॉल्ट मूल्य: प्रारंभ.
• टेक्स्टबेसलाइन: परिभाषित करते अनुलंब संरेखनमजकूर वैध मूल्ये: शीर्ष, हँगिंग, मध्य, वर्णमाला, वैचारिक, तळ. डीफॉल्ट मूल्य: वर्णमाला.

मजकूर प्रदर्शित करण्यासाठी दोन पद्धती आहेत: fillText आणि strokeText. पहिला फिलस्टाइल वापरून मजकूर काढतो, दुसरा स्ट्रोक स्टाइल वापरून मजकूर स्ट्रोक काढतो. दोन्ही पद्धती तीन युक्तिवाद घेतात: मजकूर स्वतः आणि निर्देशांक (x,y) ज्यामध्ये ते आउटपुट करणे आवश्यक आहे. चौथा पर्यायी युक्तिवाद देखील आहे − कमाल रुंदी. मजकूर निर्दिष्ट रुंदीमध्ये बसवण्यासाठी हा युक्तिवाद आवश्यक आहे.

मजकूर संरेखन गुणधर्म त्याच्या आउटपुट निर्देशांक (x,y) च्या सापेक्ष मजकूराच्या स्थितीवर परिणाम करतात.

Context.fillStyle = "#00f"; context.font = "italic 30px sans-serif"; context.textBaseline = "शीर्ष"; context.fillText(" नमस्कार जग!", 0, 0); context.font = "bold 30px sans-serif"; context.strokeText("Hello world!", 0, 50);

हे उदाहरण ब्राउझरमध्ये कसे दिसेल:

सावल्या

छाया API चार गुणधर्म प्रदान करते:

• shadowColor: सावलीचा रंग निर्दिष्ट करते. मूल्ये CSS प्रमाणेच फॉर्मेटमध्ये वैध आहेत.
• shadowBlur: पिक्सेलमध्ये सावलीच्या अस्पष्टतेचे प्रमाण निर्धारित करते. हा प्रभाव फोटोशॉपमधील गॉसियन ब्लरसारखाच आहे.
• shadowOffsetX आणि shadowOffsetY: छाया ऑफसेट पिक्सेलमध्ये परिभाषित करते (x, y).

context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.shadowBlur = 4; context.shadowColor = "rgba(255, 0, 0, 0.5)"; context.fillStyle = "#00f"; context.fillRect(20, 20, 150, 100);

ब्राउझरमध्ये सावलीचे उदाहरण असे दिसेल:

ग्रेडियंट

फिलस्टाइल आणि स्ट्रोकस्टाइल गुणधर्मांमध्ये नेहमीच्या ऐवजी कॅनव्हासग्रेडियंट ऑब्जेक्ट्स असू शकतात. CSS रंग- हे तुम्हाला रेषा आणि भरण्यासाठी ग्रेडियंट वापरण्याची परवानगी देते.

CanvasGradient ऑब्जेक्ट्स तयार करण्यासाठी तुम्ही दोन पद्धती वापरू शकता: createLinearGradient आणि createRadialGradient . पहिली पद्धत रेखीय ग्रेडियंट तयार करते आणि दुसरी रेडियल ग्रेडियंट तयार करते.

एकदा ग्रेडियंट ऑब्जेक्ट तयार झाल्यानंतर, तुम्ही addColorStop पद्धत वापरून त्यात रंग जोडू शकता.

पुढील उदाहरणग्रेडियंट कसे वापरायचे ते दर्शविते:

// तुम्हाला var gradient1 = context.createLinearGradient(sx, sy, dx, dy); // आता आपण ग्रेडियंटमध्ये रंग जोडू शकतो // पहिला ग्रेडियंट ग्रेडियंटमधील रंगाची स्थिती परिभाषित करतो. // वैध मूल्यांची श्रेणी 0 (ग्रेडियंटची सुरुवात) ते 1 (ग्रेडियंटचा शेवट) पर्यंत असते. gradient1.addColorStop(0, "#f00"); // लाल ग्रेडियंट1.addColorStop(0.5, "#ff0"); // yellow gradient1.addColorStop(1, "#00f"); // निळा // साठी रेडियल ग्रेडियंटतुम्हाला ग्रेडियंटच्या आतील आणि बाह्य वर्तुळाची // त्रिज्या देखील निर्दिष्ट करणे आवश्यक आहे. // (x,y) समन्वय या वर्तुळांची केंद्रे परिभाषित करतात. var gradient2 = context.createRadialGradient(sx, sy, sr, dx, dy, dr);

मार्क पिलग्रिम

अनुवाद: व्लाड मर्झेविच

HTML5 एक घटक म्हणून परिभाषित करते "एक रास्टर कॅनव्हास जो फ्लायवर चार्ट, गेम ग्राफिक्स किंवा प्रतिमा प्रदर्शित करण्यासाठी वापरला जाऊ शकतो." कॅनव्हास हे तुमच्या पृष्ठावरील आयताकृती क्षेत्र आहे जेथे तुम्ही करू शकता JavaScript वापरूनतुम्हाला पाहिजे ते काढू शकता.

सपोर्ट

I.E.	फायरफॉक्स	सफारी	क्रोम	ऑपेरा	आयफोन	Android
7.0+	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+

एक्सप्लोरर कॅनव्हास

हा कॅनव्हास कसा दिसतो? खरं तर, अजिबात नाही. कोणताही टॅग नाही स्वतःची सामग्रीआणि फ्रेम्स.

अदृश्य कॅनव्हास

कोड असे दिसते.

आपण काय हाताळत आहोत हे पाहण्यासाठी ठिपके असलेली सीमा जोडूया.

तुमच्याकडे एका पृष्ठावर अनेक घटक असू शकतात. प्रत्येक कॅनव्हास DOM मध्ये रेंडर केला जाईल आणि त्याची स्वतःची स्थिती राखेल. तुम्ही प्रत्येक कॅनव्हासमध्ये id विशेषता जोडल्यास, तुम्ही इतर घटकांप्रमाणे त्यात प्रवेश करू शकता.

आयडी विशेषता समाविष्ट करण्यासाठी आमचा कोड वाढवू.

आता तुम्ही DOM मध्ये घटक सहजपणे शोधू शकता.

var a_canvas = document.getElementById("a");

साधे फॉर्म

I.E.	फायरफॉक्स	सफारी	क्रोम	ऑपेरा	आयफोन	Android
7.0+	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+

* इंटरनेट एक्सप्लोरर केवळ एक्सप्लोरर कॅनव्हास लायब्ररीसह समर्थित आहे.

प्रत्येक कॅनव्हास सुरुवातीला रिकामा आहे. हे कंटाळवाणे आहे! चला काहीतरी काढूया.

ऑनक्लिक इव्हेंट या फंक्शनला कॉल करते:

फंक्शन draw_b() (


}

फंक्शनची पहिली ओळ काही विशेष करत नाही, ती फक्त DOM मध्ये एक घटक शोधते.

फंक्शन draw_b() (

var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}

प्रत्येक कॅनव्हासमध्ये एक चित्रकलेचा संदर्भ असतो ज्यामध्ये ही सर्व मजेदार गोष्ट घडते. एकदा तुम्हाला DOM मध्ये घटक सापडला की (document.getElementById() किंवा इतर कोणतीही पद्धत वापरून), getContext() पद्धतीला कॉल करा. तुम्ही getContext() पद्धतीमध्ये "2D" स्ट्रिंग निर्दिष्ट करणे आवश्यक आहे.

प्रोफेसर मार्कअपला विचारा

☞ प्र. थ्रीडी कॅनव्हास आहे का?

A. अजून नाही. निवडक उत्पादकत्यांच्या स्वतःच्या 3D API सह प्रयोग करत आहेत, परंतु कोणतेही प्रमाणित नाहीत. HTML5 स्पेसिफिकेशन नोट्स: "या स्पेसिफिकेशनच्या भविष्यातील आवृत्त्या कदाचित 3D संदर्भ परिभाषित करतील."

तर, तुमच्याकडे एक घटक आहे आणि तुमच्याकडे रेखाचित्र संदर्भ आहे जेथे रेखाचित्र पद्धती आणि गुणधर्म परिभाषित केले आहेत. आयत काढण्यासाठी समर्पित गुणधर्म आणि पद्धतींचा संपूर्ण गट आहे.

• फिलस्टाइल गुणधर्म रंग, नमुना किंवा ग्रेडियंट असू शकतो (खाली ग्रेडियंटवर अधिक). डीफॉल्टनुसार, फिलस्टाइल घन काळ्या रंगाने भरते, परंतु तुम्ही ते तुम्हाला हवे ते सेट करू शकता. जेव्हा तुम्ही पेज उघडत नाही तोपर्यंत प्रत्येक रेखाचित्र संदर्भ त्याचे स्वतःचे गुणधर्म लक्षात ठेवतो.
• fillRect(x, y, रुंदी, उंची) वर्तमान भरण्याच्या शैलीने भरलेला आयत काढतो.
• स्ट्रोक स्टाइल गुणधर्म, फिलस्टाइल सारखे, रंग, नमुना किंवा ग्रेडियंट असू शकतात.
• strokeRect(x, y, रुंदी, उंची) वर्तमान रेखा शैलीसह एक आयत काढतो. strokeRect आत भरत नाही, ते फक्त किनारी काढते.
• clearRect(x, y, रुंदी, उंची) निर्दिष्ट आयतामधील पिक्सेल काढून टाकते.

प्रोफेसर मार्कअपला विचारा

☞ प्र. कॅनव्हास “रीलोड” करणे शक्य आहे का?

A. होय. घटकाची रुंदी किंवा उंची सेट केल्याने त्यातील सामग्री मिटवली जाईल आणि सर्व रेखाचित्र संदर्भ गुणधर्म त्यांच्या डीफॉल्ट मूल्यांवर रीसेट केले जातील. तुम्हाला रुंदी बदलण्याचीही गरज नाही, तुम्ही ते फक्त वर्तमान मूल्यावर सेट करू शकता, जसे:

var b_canvas = document.getElementById("b");
b_canvas.width = b_canvas.width;

मागील उदाहरणाकडे वळू.

var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);

fillRect() पद्धतीला कॉल केल्याने एक आयत काढला जातो आणि तो सध्याच्या फिल स्टाइलने भरतो, जोपर्यंत तुम्ही बदलत नाही तोपर्यंत तो काळा असतो. आयत वरच्या डाव्या कोपऱ्याने (50, 25), रुंदी (150) आणि उंची (100) द्वारे निर्दिष्ट केले आहे. हे कसे कार्य करते हे अधिक चांगल्या प्रकारे समजून घेण्यासाठी, समन्वय प्रणाली पाहू.

कॅनव्हास एक द्विमितीय ग्रिड आहे. 0.0 समन्वय कॅनव्हासच्या वरच्या डाव्या कोपर्यात आहे. एक्स-अक्षाच्या बाजूने, मूल्ये कॅनव्हासच्या उजव्या काठाकडे वाढतात. Y अक्षाच्या बाजूने, मूल्ये कॅनव्हासच्या खालच्या काठाकडे वाढतात.

ग्रिड वापरून काढले होते आणि त्यात समाविष्ट होते:

• राखाडी उभ्या रेषांचा संच;
• राखाडी आडव्या रेषांचा संच;
• दोन काळे आडव्या रेषा;
• दोन लहान काळ्या कर्णरेषा ज्या बाण बनवतात;
• दोन काळे उभ्या रेषा;
• दोन लहान काळ्या कर्णरेषा ज्या दुसरा बाण बनवतात;
• अक्षर "x";
• "y" अक्षर;
• वरच्या डाव्या कोपऱ्याजवळ "(0, 0)" मजकूर;
• खालच्या उजव्या कोपर्यात "(500, 375)" मजकूर;
• वरच्या डाव्या कोपर्यात एक बिंदू आणि तळाशी उजव्या कोपर्यात दुसरा.

प्रथम, आपल्याला घटक स्वतः परिभाषित करणे आवश्यक आहे, त्याला रुंदी आणि उंची तसेच एक आयडी द्यावा जेणेकरून आपण ते नंतर शोधू शकू.

मग आपल्याला DOM मध्ये स्क्रिप्ट घटक शोधावा लागेल आणि तो ड्रॉइंग संदर्भामध्ये घ्यावा लागेल.

var c_canvas = document.getElementById("c");
var संदर्भ = c_canvas.getContext("2d");

आता आपण रेषा काढू शकतो.

रूपरेषा

I.E.	फायरफॉक्स	सफारी	क्रोम	ऑपेरा	आयफोन	Android
7.0+	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+

* इंटरनेट एक्सप्लोरर केवळ एक्सप्लोरर कॅनव्हास लायब्ररीसह समर्थित आहे.

अशी कल्पना करा की तुम्ही शाईने चित्र काढत आहात. तुम्ही शाईने लगेच सुरुवात करू इच्छित नाही कारण तुमची चूक होऊ शकते. त्याऐवजी, तुम्ही पेन्सिलमध्ये रेषा आणि वक्र काढण्यास सुरुवात कराल आणि जेव्हा तुम्ही समाधानी असाल, तेव्हा तुम्ही स्केचवर शाई लावाल.

प्रत्येक कॅनव्हासमध्ये पेन्सिल रेखांकनासारखे आकृतिबंध असतात. तुम्हाला पाहिजे ते तुम्ही काढू शकता, परंतु जोपर्यंत तुम्ही पेन घेत नाही आणि तुमची बाह्यरेखा शाई करत नाही तोपर्यंत ते पूर्ण झालेल्या कामाचा भाग होणार नाही.

पेन्सिलने सरळ रेषा काढण्यासाठी तुम्ही खालील दोन पद्धती वापरू शकता:

moveTo(x, y) पेन्सिलला निर्दिष्ट प्रारंभिक बिंदूवर हलवते.

lineTo(x, y) निर्दिष्ट एंडपॉइंटवर रेषा काढते.

जितक्या वेळा तुम्ही moveTo() आणि lineTo() ला कॉल कराल तितका मार्ग लांब होईल. या "पेन्सिल" पद्धती आहेत - तुम्ही त्या तुम्हाला पाहिजे तितक्या वेळा वापरू शकता, परंतु जोपर्यंत तुम्ही "शाई" पद्धतींपैकी एक वापरत नाही तोपर्यंत तुम्हाला कॅनव्हासवर काहीही दिसणार नाही.

चला एक राखाडी जाळी काढू.

उभ्या रेषा काढणे

साठी (var x = 0.5; x< 500; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 375);
}

क्षैतिज रेषा काढणे

साठी (var y = 0.5; y< 375; y += 10) {
context.moveTo(0, y);
context.lineTo(500, y);
}

या सर्व "पेन्सिल" पद्धती होत्या. खरं तर, कॅनव्हासवर अद्याप काहीही काढलेले नाही, रेखाचित्र दृश्यमान करण्यासाठी आम्हाला "शाई" तंत्राची आवश्यकता आहे.

context.strokeStyle = "#eee";
context.stroke();

स्ट्रोक() ही "इंक" पद्धतींपैकी एक आहे. हे सर्व moveTo() आणि lineTo() कॉल्सद्वारे परिभाषित केलेले जटिल मार्ग घेते आणि कॅनव्हासवर काढते. स्ट्रोकस्टाइल रेषेचा रंग नियंत्रित करते. हा निकाल आहे.

प्रोफेसर मार्कअपला विचारा

☞ Q. आपण x आणि y 0.5 वर का सुरू करतो आणि 0 वर का नाही?

A. प्रत्येक पिक्सेलचा एक मोठा चौरस म्हणून विचार करा. सर्व पूर्णांक समन्वय (0, 1, 2, ...) हे या वर्गांचे कोन आहेत. तुम्ही पूर्णांक निर्देशांकांमध्ये एक-पिक्सेल रेषा काढल्यास, ती पिक्सेल स्क्वेअरच्या विरुद्ध बाजूंना ओव्हरलॅप करेल, परिणामी दोन पिक्सेल रुंद रेखाचित्र काढले जाईल. फक्त एक पिक्सेल रुंद असलेली रेषा काढण्यासाठी, तुम्हाला निर्देशांक रेषेच्या दिशेला लंबवत 0.5 ने हलवावे लागतील.

उदाहरणार्थ, तुम्ही (1, 0) पासून (1, 3) पर्यंत रेषा काढण्याचा प्रयत्न केल्यास, ब्राउझर x=1 च्या दोन्ही बाजूला अर्धा पिक्सेल ओव्हरलॅप असलेली रेषा काढेल. स्क्रीनवर अर्धा पिक्सेल प्रदर्शित करणे शक्य नाही, म्हणून ओळ दोन पिक्सेल कव्हर करण्यासाठी विस्तारित केली जाईल.

तुम्ही (1.5, 0) पासून (1.5, 3) पर्यंत रेषा काढण्याचा प्रयत्न केल्यास, ब्राउझर x=1.5 च्या प्रत्येक बाजूला अर्धा-पिक्सेल ओव्हरलॅप असलेली रेषा काढेल, परिणामी खरी एक-पिक्सेल रेषा होईल.

या आलेखांसाठी जेसन जॉन्सनचे आभार.

आता आडवा बाण काढू. बाह्यरेषेवरील सर्व रेषा आणि वक्र एकाच रंगाने काढले आहेत (किंवा ग्रेडियंट - होय, आम्ही लवकरच त्यावर पोहोचू). आम्हाला बाण वेगळ्या रंगात काढायचा आहे - राखाडी ऐवजी काळा, म्हणून आम्हाला नवीन मार्ग सुरू करावा लागेल.

नवीन सर्किट

context.beginPath();
context.moveTo(0, 40);
context.lineTo(240, 40);
context.moveTo(260, 40);
context.lineTo(500, 40);
context.moveTo(495, 35);
context.lineTo(500, 40);
context.lineTo(495, 45);

उभा बाण जवळपास सारखाच दिसतो. आडव्या बाणासारखाच रंग असल्याने, आम्हाला दुसरा नवीन मार्ग सुरू करण्याची गरज नाही. दोन बाण एकाच बाह्यरेखाचा भाग असतील.

नवीन सर्किट नाही

context.moveTo(60, 0);
context.lineTo(60, 153);
context.moveTo(60, 173);
context.lineTo(60, 375);
context.moveTo(65, 370);
context.lineTo(60, 375);
context.lineTo(55, 370);

मी म्हणालो की हे बाण काळे असतील, परंतु स्ट्रोक स्टाइल राखाडी वर सेट केली आहे (तुम्ही नवीन मार्ग सुरू करता तेव्हा fillStyle आणि strokeStyle रीसेट केले जात नाहीत). हे सामान्य आहे कारण आम्ही नुकतीच "पेन्सिल" पद्धतींची मालिका सुरू केली आहे. परंतु आपण प्रत्यक्षात "शाई" मध्ये काढण्यापूर्वी, आपल्याला स्ट्रोक स्टाइल काळ्यावर सेट करणे आवश्यक आहे. IN अन्यथाहे दोन बाण राखाडी असतील आणि ते आमच्या लक्षात येण्याची शक्यता नाही. पुढील ओळीरंग काळ्यामध्ये बदला आणि कॅनव्हासवर रेषा काढा.

context.strokeStyle = "#000";
context.stroke();

हा निकाल आहे.

मजकूर

I.E.	फायरफॉक्स	सफारी	क्रोम	ऑपेरा	आयफोन	Android
7.0+	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+

* इंटरनेट एक्सप्लोरर केवळ एक्सप्लोरर कॅनव्हास लायब्ररीसह समर्थित आहे.

कॅनव्हासवर रेषा काढण्याव्यतिरिक्त, तुम्ही मजकूर देखील काढू शकता. आसपासच्या वेब पृष्ठावरील मजकुराच्या विपरीत, तेथे कोणतेही बॉक्स केलेले मॉडेल नाही. याचा अर्थ तेथे कोणतीही परिचित CSS मांडणी तंत्रे नाहीत: फ्लोट्स नाही, पॅडिंग नाही, मार्जिन नाही, शब्द लपेटणे नाही (जरी तुम्ही या सर्व गोष्टींचा विचार करू शकता). तुम्ही अनेक फॉन्ट विशेषता सेट करू शकता, कॅनव्हासवर एक बिंदू निवडू शकता आणि मजकूर काढू शकता.

खालील फॉन्ट विशेषता रेखाचित्र संदर्भामध्ये उपलब्ध आहेत.

• फॉन्टमध्ये आपण जोडू इच्छित काहीही असू शकते CSS गुणधर्मफॉन्ट फॉन्ट शैली, वजन, आकार, ओळ अंतरआणि हेडसेटचे कुटुंब.
• textAlign मजकूर संरेखन नियंत्रित करते. एक मालमत्ता दिसते CSS मजकूर-संरेखित, परंतु त्याच्याशी एकसारखे नाही. संभाव्य मूल्ये: प्रारंभ, शेवट, डावीकडे, उजवीकडे आणि मध्यभागी.
• टेक्स्टबेसलाइन सुरुवातीच्या बिंदूशी संबंधित मजकूर कोठे काढला आहे ते सांगते. संभाव्य मूल्ये: शीर्ष , हँगिंग , मध्य , वर्णमाला , वैचारिक आणि तळाशी .

टेक्स्टबेसलाइन विशेषता अवघड आहे कारण मजकूर स्वतःच तसा आहे (हे इंग्रजी मजकुराला लागू होत नाही, परंतु तुम्ही कोणतेही युनिकोड अक्षर काढू शकता). HTML5 तपशील बेसलाइनमधील फरक स्पष्ट करते.

em पॅड (टॉप) हे साधारणपणे फॉन्टमधील ग्लिफच्या शीर्षस्थानी असते; टांगलेली बेस लाईन जिथे १ सारखे काही ग्लिफ जोडलेले असतात; मध्य म्हणजे em प्लॅटफॉर्मच्या वरच्या आणि खालच्या दरम्यानचा अर्धा भाग; वर्णमाला आधारभूत आहे जेथे Á, ÿ, f आणि Ω सारखी चिन्हे अँकर केली जातात; वैचारिक आधाररेखा म्हणजे 私 आणि 達 सारखी अक्षरे अँकर केली जातात; em पॅडचा खालचा भाग साधारणपणे फॉन्टमधील ग्लिफच्या तळाशी असतो. बाउंडिंग बॉक्सचा वरचा आणि खालचा भाग आधाररेषेपासून लांब असू शकतो कारण ग्लिफ्स em बॉक्सच्या पलीकडे पसरतात.

इंग्रजी सारख्या साध्या अक्षरांसाठी, तुम्ही मजकूर बेसलाइन गुणधर्माच्या वरच्या, मध्य किंवा खालच्या मूल्यांना सुरक्षितपणे चिकटवू शकता.

चला काही मजकूर काढूया! कॅनव्हासमधील मजकूर हा घटकाचा फॉन्ट आकार आणि शैली वारसा घेतो, परंतु आपण रेखाचित्र संदर्भामध्ये फॉन्ट गुणधर्म सेट करून ही मूल्ये ओव्हरराइड करू शकता.

फॉन्ट शैली बदलत आहे

context.font = "ठळक 12px sans-serif";
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);

fillText पद्धत वास्तविक मजकूर काढते.

context.font = "ठळक 12px sans-serif";
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);

प्रोफेसर मार्कअपला विचारा

☞ प्र. कॅनव्हासवर मजकूर काढण्यासाठी मी सापेक्ष फॉन्ट आकार वापरू शकतो का?

A. होय. पृष्ठावरील इतर HTML घटकांप्रमाणे, ते फॉन्ट आकारावर आधारित गणना करेल CSS नियम. तुम्ही context.font गुणधर्म यावर सेट केल्यास सापेक्ष आकारफॉन्ट जसे की 1.5em किंवा 150%, तुमचा ब्राउझर त्यास घटकाच्या गणना केलेल्या फॉन्ट आकाराने गुणाकार करेल.

वरच्या डाव्या कोपऱ्यातील मजकुरासाठी, मला मजकूराचा वरचा भाग y=5 वर असावा असे समजू. पण मी आळशी आहे, मला मजकूराची उंची मोजायची नाही आणि बेसलाइनची गणना करायची नाही. त्याऐवजी, मी मजकूर बेसलाइन शीर्षस्थानी सेट करेन आणि मजकुराच्या आसपासच्या आयताच्या वरच्या डाव्या कोपर्यातील निर्देशांक निर्दिष्ट करेन.

context.textBaseline = "शीर्ष";
context.fillText("(0 , 0)", 8, 5);

आता मजकूर खालच्या उजव्या कोपर्यात आहे. समजा मला तळाशी उजव्या कोपऱ्यात मजकूर हवा आहे जो निर्देशांक (492, 370) वर असेल - तो कॅनव्हासच्या तळाशी उजव्या कोपऱ्यातून फक्त काही पिक्सेल आहे - परंतु मला मजकूराची रुंदी किंवा उंची मोजायची नाही . मी textAlign उजवीकडे आणि textBaseline खाली सेट करू शकतो, आणि नंतर मजकूराच्या बाउंडिंग आयताच्या तळाशी उजव्या कोपऱ्यातील समन्वयांसह fillText() ला कॉल करू शकतो.

context.textAlign = "योग्य";
context.textBaseline = "तळाशी";
context.fillText("(500 , 375)", 492, 370);

आणि येथे परिणाम आहे.

अरेरे! आम्ही कोपऱ्यात ठिपके विसरलो. वर्तुळे कशी काढायची ते आपण थोड्या वेळाने पाहू. आत्तासाठी, मी थोडीशी फसवणूक करीन आणि त्यांना आयताच्या स्वरूपात काढू.

दोन गुण काढा

context.fillRect(0, 0, 3, 3);
context.fillRect(497, 372, 3, 3);

आणि एवढेच लिहिले आहे! येथे अंतिम निकाल आहे.

* इंटरनेट एक्सप्लोरर केवळ एक्सप्लोरर कॅनव्हास लायब्ररीसह समर्थित आहे.

या धड्यात आधी, तुम्ही रंगाने भरलेला आयत कसा काढायचा, मग रेषा कशी काढायची हे शिकलात. निर्दिष्ट रंग. परंतु आकार आणि रेषा केवळ घन रंगांपुरती मर्यादित नाहीत; आपण ग्रेडियंटसह सर्व प्रकारचे जादू वापरू शकता. एक उदाहरण पाहू.

लेआउट इतर कॅनव्हास प्रमाणेच दिसते.

प्रथम आपण घटक आणि त्याचे रेखाचित्र संदर्भ शोधले पाहिजे.

var d_canvas = document.getElementById("d");
var संदर्भ = d_canvas.getContext("2d");

एकदा आम्ही संदर्भ सेट केल्यावर, आम्ही ग्रेडियंट परिभाषित करू शकतो. ग्रेडियंट आहे गुळगुळीत संक्रमणदोन किंवा अधिक रंगांमध्ये. कॅनव्हास रेखांकन संदर्भ दोन प्रकारच्या ग्रेडियंटला समर्थन देतो:

CreateLinearGradient(x0, y0, x1, y1) (x0, y0) पासून (x1, y1) पर्यंत रेषा काढते.

createRadialGradient(x0, y0, r0, x1, y1, r1) दोन वर्तुळांमध्ये एक शंकू काढतो. पहिले तीन पॅरामीटर्स केंद्र (x0, y0) आणि त्रिज्या r0 सह प्रारंभिक वर्तुळ परिभाषित करतात. शेवटचे तीन पॅरामीटर्स केंद्र (x1, y1) आणि त्रिज्या r1 असलेले शेवटचे वर्तुळ दर्शवतात.

चला एक रेखीय ग्रेडियंट बनवू. ग्रेडियंट कोणत्याही आकाराचे असू शकतात, परंतु मी कॅनव्हासप्रमाणेच हा ग्रेडियंट 300px रुंद करेन.

ग्रेडियंट ऑब्जेक्ट तयार करणे

var my_gradient = context.createLinearGradient(0, 0, 300, 0);

दुसऱ्या आणि चौथ्या पॅरामीटर्सची मूल्ये 0 असल्याने, हा ग्रेडियंट डावीकडून उजवीकडे भरला जाईल.

एकदा आपल्याकडे ग्रेडियंट ऑब्जेक्ट आला की आपण ग्रेडियंटचे रंग परिभाषित करू शकतो. ग्रेडियंटमध्ये दोन किंवा अधिक स्टॉप रंग असतात, जे ग्रेडियंटच्या बाजूने कुठेही असू शकतात. स्टॉप कलर जोडण्यासाठी, आपल्याला त्याची स्थिती ग्रेडियंटसह निर्दिष्ट करणे आवश्यक आहे ते 0 ते 1 पर्यंत असू शकते.

काळा ते पांढरा ग्रेडियंट परिभाषित करू.

my_gradient.addColorStop(0, "काळा");

ग्रेडियंट व्याख्या कॅनव्हासवर काहीही काढत नाही, ती फक्त स्मृतीमध्ये कुठेतरी लपलेली वस्तू आहे. ग्रेडियंट काढण्यासाठी, फिलस्टाइल ग्रेडियंटवर सेट करा आणि आयता किंवा रेषासारखा आकार काढा.

ग्रेडियंट भरण्याची शैली

context.fillStyle = my_gradient;

आणि येथे परिणाम आहे.

समजा तुम्हाला वरपासून खालपर्यंत ग्रेडियंट हवा आहे. जेव्हा तुम्ही ग्रेडियंट ऑब्जेक्ट तयार करता, तेव्हा x व्हॅल्यूज (पहिले आणि तिसरे पॅरामीटर) स्थिर ठेवा आणि y व्हॅल्यूज (दुसरा आणि चौथा पॅरामीटर) 0 ते कॅनव्हासच्या उंचीपर्यंत करा.

x मूल्ये 0 आहेत, y मूल्ये बदलतात

var my_gradient = context.createLinearGradient(0, 0, 0, 225);

my_gradient.addColorStop(1, "पांढरा");

context.fillRect(0, 0, 300, 225);

आणि येथे परिणाम आहे.

तुम्ही तिरपे ग्रेडियंट देखील बनवू शकता.

x आणि y दोन्ही मूल्ये बदलतात

var my_gradient = context.createLinearGradient(0, 0, 300, 225);
my_gradient.addColorStop(0, "काळा");
my_gradient.addColorStop(1, "पांढरा");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

हा निकाल आहे.

प्रतिमा सपोर्ट

I.E.	फायरफॉक्स	सफारी	क्रोम	ऑपेरा	आयफोन	Android
7.0+	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+

* इंटरनेट एक्सप्लोरर केवळ एक्सप्लोरर कॅनव्हास लायब्ररीसह समर्थित आहे.

कॅनव्हासचा रेखाचित्र संदर्भ प्रतिमा काढण्यासाठी drawImage() पद्धत परिभाषित करतो. या पद्धतीमध्ये तीन, पाच किंवा नऊ युक्तिवाद असू शकतात.

• drawImage(image, dx, dy) एक प्रतिमा घेते आणि कॅनव्हासवर काढते. दिलेले निर्देशांक (dx, dy) प्रतिमेच्या वरच्या डाव्या कोपऱ्याशी संबंधित आहेत, निर्देशांक (0, 0) प्रतिमा कॅनव्हासच्या वरच्या डाव्या कोपर्यात आउटपुट करतात.
• drawImage(image, dx, dy, dw, dh) एक प्रतिमा घेते, ती रुंदी dw आणि उंची dh पर्यंत मोजते आणि निर्देशांक (dx, dy) वर आउटपुट करते.
• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) प्रतिमा घेते, ती एका आयतामध्ये क्रॉप करते (sx, sy, sw, sh), ती आकारमानात (dw, dh) मोजते आणि प्रदर्शित करते ते c बिंदूवर (dx, dy).

HTML5 तपशील drawImage() पॅरामीटर्सचे स्पष्टीकरण देते:

मूळ आयत हा एक आयत आहे (मूळ प्रतिमेमध्ये) ज्याचे कोपरे चार बिंदू आहेत (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh).

गंतव्य आयत हा एक आयत आहे (कॅनव्हासमध्ये) ज्याचे कोपरे चार बिंदूंवर आहेत (dx, dy), (dx+dw, dy), (dx+dw, dy+dh), (dx, dy+dh).

कॅनव्हासवर प्रतिमा रंगविण्यासाठी, आपल्याकडे एक प्रतिमा असणे आवश्यक आहे. असू शकते विद्यमान घटक किंवा तुम्ही JavaScript द्वारे इमेज() ऑब्जेक्ट तयार करू शकता. कोणत्याही परिस्थितीत, कॅनव्हासवर चित्र काढण्यापूर्वी प्रतिमा पूर्णपणे लोड केली आहे याची खात्री करणे आवश्यक आहे.

आपण विद्यमान घटक वापरत असल्यास , नंतर तुम्ही window.onload इव्हेंटद्वारे कॅनव्हासवर सुरक्षितपणे रेखाटू शकता.

वापर

window.onload = function() (


var cat = document.getElementById("मांजर");
context.drawImage(मांजर, 0, 0);
};

तुम्ही पूर्णपणे JavaScript मध्ये एखादी वस्तू तयार करत असल्यास, Image.onload इव्हेंट दरम्यान तुम्ही कॅनव्हासवर इमेज सुरक्षितपणे काढू शकता.

इमेज() ऑब्जेक्ट वापरणे

var canvas = document.getElementById("e");
var संदर्भ = canvas.getContext("2d");
वर मांजर = नवीन प्रतिमा();
cat.src = "images/cat.png";
cat.onload = function() (
context.drawImage(मांजर, 0, 0);
};

drawImage() पद्धतीतील पर्यायी तिसरे आणि चौथे पॅरामीटर्स इमेजच्या स्केलवर नियंत्रण ठेवतात. समान प्रतिमा तिची रुंदी आणि उंची अर्ध्यापर्यंत मोजली जाते आणि त्याच कॅनव्हासमधील वेगवेगळ्या निर्देशांकांवर पुनरावृत्ती केली जाते.

येथे एक स्क्रिप्ट आहे जी "मल्टी-कॅट" प्रभाव निर्माण करते.

cat.onload = function() (
साठी (var x = 0, y = 0;
x< 500 && y < 375;
x += ५०, y += ३७) (
context.drawImage(cat, x, y, 88, 56);
}
};

हे सर्व प्रयत्न एक वैध प्रश्न निर्माण करतात: आपण प्रथम स्थानावर कॅनव्हासवर प्रतिमा का रंगवू इच्छिता? घटकाच्या तुलनेत कॅनव्हासवर प्रतिमा प्रदर्शित करताना अतिरिक्त गुंतागुंत काय आहेत? किंवा काही CSS नियम? दहा आच्छादित घटकांसह "मल्टी-कॅट" प्रभाव देखील केला जाऊ शकतो .

याचे सोपे उत्तर आहे की तुम्ही कॅनव्हासवर मजकूरही काढू शकता. समन्वय प्लॉटमध्ये मजकूर, रेषा आणि आकार समाविष्ट आहेत. अधिक जटिल आकृती चिन्ह, स्प्राइट्स किंवा इतर ग्राफिक घटक समाविष्ट करण्यासाठी drawImage() सहजपणे वापरू शकतात.

IE बद्दल काय?

मायक्रोसॉफ्ट इंटरनेट एक्सप्लोरर (आवृत्ती 8 पर्यंत समावेशी, वर्तमान आवृत्तीलेखनाच्या वेळी) कॅनव्हास API ला समर्थन देत नाही. तथापि, इंटरनेट एक्सप्लोरर VML नावाच्या मालकीच्या मायक्रोसॉफ्ट तंत्रज्ञानाला समर्थन देते, जे सारख्याच अनेक गोष्टी करू शकते. अशा प्रकारे excanvas.js चा जन्म झाला.

हे कसे कार्य करते? तुम्ही विचारले याचा मला आनंद झाला. मी संपूर्ण कोड दाखवणार नाही, तुम्ही तो संपूर्णपणे येथे पाहू शकता. मी चुकणार बहुतेकगेमसाठीच कोड, परंतु मला कोडचे काही तुकडे हायलाइट करायचे आहेत जे प्रत्यक्षात कॅनव्हासवर काढतात आणि त्यावर माउस क्लिकला प्रतिसाद देतात.

पृष्ठ लोड दरम्यान, आम्ही स्वतःचे परिमाण सेट करून आणि त्याच्या रेखांकन संदर्भासाठी पॉइंटर संचयित करून गेम सुरू करतो.

gCanvasElement.width = kPixelWidth;
gCanvasElement.height = kPixelHeight;
gDrawingContext = gCanvasElement.getContext("2d");

पुढे, आम्ही असे काहीतरी करू जे तुम्ही आधी पाहिले नसेल: साठी क्लिक इव्हेंट ट्रॅकिंग जोडा.

gCanvasElement.addEventListener("क्लिक", halmaOnClick, असत्य);

जेव्हा वापरकर्ता कॅनव्हासच्या आत कुठेही क्लिक करतो तेव्हा halmaOnClick() फंक्शन कॉल केले जाते. त्याचा युक्तिवाद MouseEvent ऑब्जेक्ट आहे, ज्यामध्ये वापरकर्त्याने कोठे क्लिक केले याबद्दल माहिती असते.

फंक्शन halmaOnClick(e) (
var सेल = getCursorPosition(e);
// बाकी फक्त गेम लॉजिक आहे
साठी (var i = 0; i< gNumPieces; i++) {
जर ((gPieces[i].row == cell.row) &&
(gPieces[i].column == cell.column)) (
clickOnPiece(i);
परत
}
}
ClickOnEmptyCell(सेल);
}

पुढील पायरी म्हणजे MouseEvent ऑब्जेक्ट मिळवणे आणि गेम बोर्डवरील कोणत्या स्क्वेअरवर नुकतेच क्लिक केले गेले याची गणना करणे. कॉर्नर्स बोर्ड संपूर्ण कॅनव्हास घेते, त्यामुळे प्रत्येक क्लिक बोर्डमध्ये होते. आपण फक्त कोठे शोधणे आवश्यक आहे. हे अवघड आहे कारण जवळजवळ सर्व ब्राउझरमध्ये माउस इव्हेंट वेगळ्या पद्धतीने हाताळले जातात.

फंक्शन getCursorPosition(e) (
var x;
var y;
जर (e.pageX != undefined && e.pageY != अपरिभाषित) (
x = e.pageX;
y = e.pageY;
}
इतर(
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}

चालू या क्षणीआमच्याकडे दस्तऐवजाच्या सापेक्ष x आणि y समन्वय आहेत (म्हणजे संपूर्ण HTML पृष्ठ). ते पूर्णपणे उपयुक्त नाही. आम्हाला कॅनव्हासच्या सापेक्ष समन्वय हवे आहेत.

x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;

आता आपल्याकडे x आणि y निर्देशांक आहेत जे कॅनव्हासशी संबंधित आहेत. म्हणजेच, जर या बिंदूवर x 0 असेल आणि y 0 असेल तर, आम्हाला माहित आहे की वापरकर्त्याने कॅनव्हासच्या वरच्या डाव्या पिक्सेलवर क्लिक केले आहे.

var सेल = नवीन सेल(Math.floor(y/kPieceHeight),
Math.floor(x/kPieceWidth));
रिटर्न सेल;
}

याप्रमाणे! माऊस इव्हेंट कठीण आहेत. परंतु तुम्ही तुमच्या सर्व गोष्टींमध्ये समान तर्क वापरू शकता स्वतःचे अर्जकॅनव्हास सह. लक्षात ठेवा: माउस क्लिक → डॉक्युमेंट-रिलेटिव्ह कोऑर्डिनेट्स → कॅनव्हास-रिलेटिव्ह कोऑर्डिनेट्स → ऍप्लिकेशन-विशिष्ट कोड.

ठीक आहे, चला मूलभूत गोष्टी पाहू ठराविक कार्येरेखाचित्र कारण ग्राफिक्स इतके सोपे आहेत की प्रत्येक वेळी गेममध्ये काहीतरी बदल झाल्यावर मी संपूर्ण बोर्ड साफ करून पुन्हा काढण्याचा निर्णय घेतला. हे काटेकोरपणे आवश्यक नाही. कॅनव्हासचा रेखाचित्र संदर्भ तुम्ही पूर्वी काढलेल्या सर्व गोष्टी राखून ठेवेल, जरी वापरकर्त्याने कॅनव्हास दृश्याबाहेर स्क्रोल केला किंवा दुसरा टॅब निवडला आणि नंतर परत आला. तुम्ही अधिक क्लिष्ट ग्राफिक्स (जसे की आर्केड गेम्स) सह एखादे ॲप्लिकेशन विकसित करत असल्यास, तुम्ही कॅनव्हासच्या त्या क्षेत्रांचा मागोवा घेऊन कार्यप्रदर्शन ऑप्टिमाइझ करू शकता जे गलिच्छ आहेत आणि फक्त तेच क्षेत्र पुन्हा रेखाटू शकता. पण हे या पुस्तकाच्या आवाक्याबाहेरचे आहे.

gDrawingContext.beginPath();
/* उभ्या रेषा */
साठी (var x = 0; x