एचटीएमएल ट्यूटोरियल

एचटीएमएल होम एचटीएमएल परिचय एचटीएमएल संपादक एचटीएमएल बेसिक एचटीएमएल तत्व एचटीएमएल गुण एचटीएमएल शीर्षक एचटीएमएल पैराग्राफ एचटीएमएल शैलियाँ एचटीएमएल स्वरूपण एचटीएमएल कोटेशन एचटीएमएल टिप्पणियाँ एचटीएमएल रंग एचटीएमएल सीएसएस एचटीएमएल लिंक एचटीएमएल छवियाँ एचटीएमएल फ़ेविकॉन एचटीएमएल टेबल्स एचटीएमएल सूचियां एचटीएमएल ब्लॉक और इनलाइन एचटीएमएल क्लासेस एचटीएमएल आईडी एचटीएमएल इफ्रेम्स एचटीएमएल जावास्क्रिप्ट HTML फ़ाइल पथ एचटीएमएल हेड एचटीएमएल लेआउट एचटीएमएल उत्तरदायी एचटीएमएल कंप्यूटर कोड HTML शब्दार्थ एचटीएमएल स्टाइल गाइड एचटीएमएल इकाइयां एचटीएमएल प्रतीक एचटीएमएल इमोजी एचटीएमएल वर्णसेट एचटीएमएल यूआरएल एनकोड एचटीएमएल बनाम एक्सएचटीएमएल

एचटीएमएल फॉर्म

एचटीएमएल फॉर्म एचटीएमएल फॉर्म गुण एचटीएमएल फॉर्म एलिमेंट्स एचटीएमएल इनपुट प्रकार एचटीएमएल इनपुट गुण HTML इनपुट फॉर्म विशेषताएँ

एचटीएमएल ग्राफिक्स

एचटीएमएल कैनवास एचटीएमएल एसवीजी

एचटीएमएल मीडिया

एचटीएमएल मीडिया एचटीएमएल वीडियो एचटीएमएल ऑडियो एचटीएमएल प्लग-इन एचटीएमएल यूट्यूब

एचटीएमएल एपीआई

एचटीएमएल जियोलोकेशन एचटीएमएल ड्रैग/ड्रॉप एचटीएमएल वेब स्टोरेज एचटीएमएल वेब वर्कर्स एचटीएमएल एसएसई

एचटीएमएल उदाहरण

एचटीएमएल उदाहरण एचटीएमएल प्रश्नोत्तरी एचटीएमएल व्यायाम एचटीएमएल प्रमाणपत्र एचटीएमएल सारांश एचटीएमएल अभिगम्यता

एचटीएमएल संदर्भ

एचटीएमएल टैग सूची एचटीएमएल गुण HTML वैश्विक गुण एचटीएमएल ब्राउज़र समर्थन एचटीएमएल घटनाक्रम एचटीएमएल रंग एचटीएमएल कैनवास एचटीएमएल ऑडियो/वीडियो एचटीएमएल सिद्धांत एचटीएमएल कैरेक्टर सेट एचटीएमएल यूआरएल एनकोड एचटीएमएल लैंग कोड HTTP संदेश HTTP तरीके पीएक्स से ईएम कन्वर्टर कुंजीपटल अल्प मार्ग

एचटीएमएल कैनवास ग्राफिक्स


आपका ब्राउज़र <कैनवास> तत्व का समर्थन नहीं करता है।

HTML <canvas>तत्व का उपयोग वेब पेज पर ग्राफिक्स बनाने के लिए किया जाता है।

बाईं ओर का ग्राफिक के साथ बनाया गया है <canvas>यह चार तत्वों को दिखाता है: एक लाल आयत, एक ढाल आयत, एक बहुरंगा आयत और एक बहुरंगा पाठ।


एचटीएमएल कैनवास क्या है?

HTML <canvas>तत्व का उपयोग जावास्क्रिप्ट के माध्यम से, मक्खी पर ग्राफिक्स बनाने के लिए किया जाता है।

तत्व ग्राफिक्स के <canvas>लिए केवल एक कंटेनर है। वास्तव में ग्राफिक्स बनाने के लिए आपको जावास्क्रिप्ट का उपयोग करना चाहिए।

कैनवास में पथ, बॉक्स, वृत्त, पाठ, और चित्र जोड़ने की कई विधियाँ हैं।


ब्राउज़र समर्थन

तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो <canvas>तत्व का पूर्ण समर्थन करता है।

Element
<canvas> 4.0 9.0 2.0 3.1 9.0

कैनवास उदाहरण

एक कैनवास एक HTML पृष्ठ पर एक आयताकार क्षेत्र है। डिफ़ॉल्ट रूप से, कैनवास की कोई सीमा नहीं होती है और कोई सामग्री नहीं होती है।

मार्कअप इस तरह दिखता है:

<canvas id="myCanvas" width="200" height="100"></canvas>

नोट: कैनवास के आकार को परिभाषित करने के लिए हमेशा एक idविशेषता (स्क्रिप्ट में संदर्भित) और ए widthऔर विशेषता निर्दिष्ट करें। heightबॉर्डर जोड़ने के लिए, styleविशेषता का उपयोग करें।

यहां एक बुनियादी, खाली कैनवास का एक उदाहरण दिया गया है:

आपका ब्राउज़र कैनवास तत्व का समर्थन नहीं करता है।

उदाहरण

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>


एक जावास्क्रिप्ट जोड़ें

आयताकार कैनवास क्षेत्र बनाने के बाद, आपको ड्राइंग करने के लिए एक जावास्क्रिप्ट जोड़ना होगा।

यहां कुछ उदाहरण दिए गए हैं:

एक रेखा खींचो

आपका ब्राउज़र कैनवास तत्व का समर्थन नहीं करता

उदाहरण

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

एक चक्र बनाएं

आपका ब्राउज़र कैनवास तत्व का समर्थन नहीं करता

उदाहरण

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>

एक टेक्स्ट ड्रा करें

आपका ब्राउज़र कैनवास तत्व का समर्थन नहीं करता

उदाहरण

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>

स्ट्रोक टेक्स्ट

आपका ब्राउज़र कैनवास तत्व का समर्थन नहीं करता

उदाहरण

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>

रेखीय ढाल ड्रा करें

आपका ब्राउज़र कैनवास तत्व का समर्थन नहीं करता

उदाहरण

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

वृत्ताकार ढाल ड्रा करें

आपका ब्राउज़र कैनवास तत्व का समर्थन नहीं करता

उदाहरण

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

चित्र बनाएं

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>

HTML कैनवास ट्यूटोरियल

इसके बारे में अधिक जानने के लिए <canvas>, कृपया हमारा HTML कैनवास ट्यूटोरियल पढ़ें ।