HTML5 Canvas
- पिछला पृष्ठ HTML Input फॉर्म प्रोपर्टी
- अगला पृष्ठ HTML5 SVG
canvas एलीमेंट वेब पृष्ठ पर ग्राफिक्स ड्राइंग के लिए उपयोग किया जाता है。
कैनवस क्या है?
HTML5 के canvas एलीमेंट वेब पृष्ठ पर चित्र ड्राइंग के लिए जावास्क्रिप्ट का उपयोग करते हैं。
कैनवस एक चतुर्भुज क्षेत्र है, आप इसके हर पिक्सल को नियंत्रित कर सकते हैं。
canvas कई ड्राइंग पथ, चतुर्भुज, गोलाकार, अक्षर और चित्र जोड़ने के तरीके रखता है。
Canvas एलीमेंट बनाएं
HTML5 पृष्ठ पर canvas एलीमेंट जोड़ें。
एलीमेंट के id, चौड़ाई और ऊंचाई निर्धारित करें:
<canvas id="myCanvas" width="200" height="100"></canvas>
जावास्क्रिप्ट के द्वारा चित्रण
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 के द्वारा canvas एलीमेंट को खोजता है:
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
