एचटीएमएल कैनवास ग्राफिक्स
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 कैनवास ट्यूटोरियल पढ़ें ।