HTML5 Canvas
- पिछला पृष्ठ HTML Input फॉर्म अट्रिब्यूट
- अगला पृष्ठ HTML5 SVG
कैनवस एलिमेंट वेब पृष्ठ पर ग्राफिक्स ड्राइंग के लिए उपयोग किया जाता है।
कैनवस क्या है?
HTML5 कैनवस एलिमेंट जावास्क्रिप्ट के द्वारा वेब पृष्ठ पर चित्र ड्राइंग करता है।
कैनवस एक चतुर्भुज क्षेत्र है, आप इसके हर पिक्सल को नियंत्रित कर सकते हैं।
कैनवस कई ड्राइंग पथ, चतुर्भुज, गोलाकार, अक्षर और छवि जोड़ने के तरीके रखता है。
कैनवस एलिमेंट बनाता है
HTML5 पृष्ठ पर कैनवस एलिमेंट जोड़ता है।
एलिमेंट के id, चौड़ाई और ऊंचाई निर्धारित करता है:
<canvas id="myCanvas" width="200" height="100"></canvas>
जावास्क्रिप्ट के द्वारा ड्राइंग
कैनवस एलिमेंट खुद ड्राइंग की क्षमता नहीं रखता है। सभी ड्राइंग कार्यों को जावास्क्रिप्ट के अंदर पूरा करना होता है:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
जावास्क्रिप्ट id के द्वारा कैनवस एलिमेंट खोजता है:
var c=document.getElementById("myCanvas");
तब, context वस्तु बनाएं:
var cxt=c.getContext("2d");
getContext("2d") वस्तु है एक आंतरिक HTML5 वस्तु जो कई ड्राइंग पथ, वर्ग, वृत्त, अक्षर और छवि जोड़ने के विधियों को रखती है。
नीचे के दो सबड़े लाइन कोड एक लाल वर्ग ड्राइंग करते हैं:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle विधि इसे लाल रंग में रंगती है, और fillRect विधि रूप, स्थान और साइज को निर्धारित करती है。
निर्देशांक को समझें
ऊपरी fillRect विधि (0,0,150,75) पैरामीट रखती है。
इसका अर्थ है: 150x75 के वर्गाकार कैनवस पर ड्राइंग करें, जो ऊपरी दाएँ को (0,0) से शुरू होता है。
इस तरह के चित्र में, कैनवस के X और Y निर्देशांक कैनवस पर चित्रीकरण के लिए स्थान निर्धारित करते हैं。
उदाहरण: वर्ग के ऊपर माउस को ले जाने पर निर्देशांक दिखाया जाएगा
अधिक कैनवस उदाहरण
कैनवस एलिमेंट पर चित्रीकरण करने के और अधिक उदाहरण:
उदाहरण - रेखा
साइज के साथ शुरू करने के और समाप्त करने के स्थान को निर्दिष्ट करके एक रेखा ड्राइंग करें:
JavaScript कोड :
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
कैनवस एलिमेंट :
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> आपका ब्राउज़र कैनवस एलिमेंट को समर्थित नहीं करता. </canvas>
उदाहरण - वृत्त
साइज, रंग और स्थान को निर्दिष्ट करके एक वृत्त ड्राइंग करें:
JavaScript कोड :
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
कैनवस एलिमेंट :
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> आपका ब्राउज़र कैनवस एलिमेंट को समर्थित नहीं करता. </canvas>
उदाहरण - ग्रेडिएंट
आप निर्दिष्ट करे वाले रंग के साथ ग्रेडिएंट बैकग्राउंड ड्राइंग करें:
JavaScript कोड :
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
कैनवस एलिमेंट :
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> आपका ब्राउज़र कैनवस एलिमेंट को समर्थित नहीं करता. </canvas>
उदाहरण - छवि
एक छवि कैनवस पर रखें :
JavaScript कोड :
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
कैनवस एलिमेंट :
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> आपका ब्राउज़र HTML5 कैनवस टैग को समर्थित नहीं करता。 </canvas>
HTML कैनवस शिक्षा
कैनवस के बारे में अधिक जानने के लिए हमारे HTML कैनवस शिक्षा。
- पिछला पृष्ठ HTML Input फॉर्म अट्रिब्यूट
- अगला पृष्ठ HTML5 SVG
