Canvas element in Hindi – Free HTML Tutorial in Hindi
इस HTML tutorial in hindi के post ( canvas element in hindi ) में हम जानेंगे की HTML canvas kya hota hai.
HTML canvas kya hota hai ( What is Canvas? )
HTML canvas का उपयोग javascript के द्वारा HTML web page पर graphics draw करने के लिए किया जाता है | canvas मूल रूप से Apple द्वारा Mac OS dashboard widgets के लिए और safari web browser में graphics को power देने के लिए पेश किया गया था। बाद में इसे firefox , google chrome और opera ने adopted किया।
अब canvas HTML5 specification का part है | default रूप से canvas element में बिना किसी border और बिना किसी content के साथ 300px width और 150px height होती है |
हालांकि , css की height and width property के जरिये canvas की custom height and width set कर सकते है , और css की border property के जरिये border set कर सकते है |
Canvas coordinates kya hai
canvas एक 2D ( two-dimensional ) rectangular area है | canvas के ऊपरी-बाएँ कोने के Coordinates (0 , 0 ) है , जिन्हे origin के नाम से जाना जाता है | और canvas के निचे-दाएं कोने के coordinates canvas के width and height है |
Canvas me path and shape kaise banaye
HTML5 में newly introduced किया गया canvas और javascript का उपयोग करके basic path और shape कैसे बनाते है , यह समझने के लिए निचे दिया गया उदहारण देखे |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drawing on Canvas</title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// draw stuff here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>आइये अब हम ऊपर दिए गए code को समझने की कोशिश करते है |
- HTML body tag में <canvas> element का उपयोग किया है , और ID attribute के जरिये उसकी ID define की है | इसके साथ canvas element में width and height attributes का उपयोग करके canvas की width और height set की है |
- Javascript के code को HTML document में define करने के लिए
<script>.....</script>tag का उपयोग किया गया है | - Page load होगा तब
window.onloadevent निष्पादित ( execute ) होगा। - एक बार page load हो जाने के बाद, हम getElementById() method के जरिये canvas को access कर सकते है |
- बाद में हमने canvas object के getContext () method में 2d pass करके 2D canvas context define किया है |
Canvas element me line kaise lagaye
canvas में सबसे basic path सीधी line draw करना है | इस line को draw करने के लिए सबसे जरुरी method moveTo(), lineTo() और stroke() है |
moveTo()method के जरिये जिस position से line खींचनी है उस position को define किया जाता है |- जबकि
lineTo()method का उपयोग line के end point के निर्देशांक ( coordinates ) को परिभाषित करने के लिए किया जाता है | - और अंत में stroke() विधि का उपयोग line को visible बनाने के लिए किया जाता है |
निचे दिया गया example को try करे |
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(80, 140);
context.lineTo(230, 40);
context.stroke();
};
</script>
<body>
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
</body>Canvas me arc kaise banaye
arc() method का उपयोग करके web page पर arcs बना सकते है | इस method का syntax कुछ इस प्रकार है:
context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);निचे दिया गया javascript code canvas पर arc draw करेगा |
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(140, 140, 90, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>
<body>
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
</body>Canvas me rectangle kaise lagaye
आप rect() method का उपयोग करके rectangle या square shape बना सकते है | इस method में चार parameters की जरूरत होती है – rectangle की X , Y position और width and height.
rect() method का basic syntax कुछ इस प्रकार है :
context.rect(x, y, width, height);निचे दिया गया javascript code canvas के center में rectangle को draw करेगा |
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(60, 50, 180, 80);
context.stroke();
};
</script>
<body>
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
</body>Canvas me circle kaise banaye
circle को create करने की कोई specific method नहीं है , लेकिन आप arc() method का उपयोग करके circle बना सकते है |
arc() method का उपयोग करके complete circle बनाने का syntax कुछ इस प्रकार है |
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);निम्नलिखित उदहारण canvas के center में complete circle draw करेगा |
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(140, 100, 80, 0, 2 * Math.PI, false);
context.stroke();
};
</script>
<body>
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
</body>Canvas stroke me style aur color kaise lagaye
Stroke का default color black है और इसकी मोटाई one pixels है | लेकिन, आप strokeStyle और lineWidth property का उपयोग करके stroke का color और चौड़ाई सेट कर सकते हैं।
निम्नलिखित उदाहरण 4 pixels चौड़ाई वाली एक लाल रंग की रेखा खींचेगा।
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 4;
context.strokeStyle = "red";
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
</script>
<body>
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
</body>आप lineCap property का उपयोग करके lines के लिए caps style भी set कर सकते हैं। lineCap के लिए यह तीन style उपलब्ध हैं – round, butt, and square.
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 12;
context.strokeStyle = "red";
context.lineCap = "round";
context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>
<body>
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
</body>How to fill color in canvas shape in Hindi
आप fillStyle() method का उपयोग करके canvas shape के अंदर color भी भर सकते हैं।
निचे दिया गया उदहारण shape में color fill करेगा |
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
context.fillStyle = "#ff0000";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();
};
</script>
<body>
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
</body>Note :- जब भी canvas पर style apply करो तो stroke को सही ढंग से render करने के लिए fill() method को troke() method से पहले उपयोग करे |
इसी तरह, circle में भी color fill करने के लिए fillStyle() method का उपयोग कर सकते है |
How to fill Gradient Color in canvas shape
आप canvas shapes के अंदर gradient color भी भर सकते हैं। यहाँ दो प्रकार के gradient का उपयोग कर सकते है – linear and radial.
linear gradient का basic syntax निचे दिया गया है |
var grd = context.createLinearGradient(startX, startY, endX, endY);linear gradient color भरने के लिए createLinearGradient() method का उपयोग किया जाता है |
आइये इसे समझने के लिए निम्नलिखित उदहारण देखे |
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(60, 50, 200, 100);
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, '#40aae6');
grd.addColorStop(1, '#063b84');
context.fillStyle = grd;
context.fill();
context.stroke();
};
</script>
<body>
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
</body>ठीक इसी तरह आप canvas shape में radial gradient color भी fill कर सकते है |
निचे radial gradient का basic syntax दिया गया है |
var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);निम्नलिखित उदहारण circle में radial gradient color fill करेगा |
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);
grd.addColorStop(0, '#40aae6');
grd.addColorStop(1, '#063b84');
context.fillStyle = grd;
context.fill();
context.stroke();
};
</script>
<body>
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
</body>canvas me text kaise banaye ( How to draw text on canvas )
आप canvas पर text भी बना सकते हैं। इन text में कोई भी unicode characters हो सकता है।
निम्नलिखित उदहारण text को draw करेगा |
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.fillText("Tech Samundra!", 50, 100);
};
</script>
<body>
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
</body>आप अतिरिक्त रूप से canvas पर text का color और alignment भी set कर सकते हैं:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle = "red";
context.fillText("Tech Samundra!", 150, 100);
};
</script>
<body>
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
</body>आप strokeText() विधि का उपयोग करके text पर stroke भी लगा सकते हैं। यह method सिर्फ text के border पर ही color fill करेगा , लेकिन आप strokeText() method के साथ fillText() का उपयोग करके text में color भी fill कर सकते है |
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.strokeStyle = "red";
context.strokeText("Tech Samundra!", 150, 100);
context.fillStyle = "blue";
context.fillText("Tech Samundra!", 150, 100);
};
</script>
<body>
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
</body>हमें उम्मीद है की आपको HTML Tutorial in Hindi के इस Canvas element topic में अच्छे से समझमे आया होंगा , फिर भी यदि आपके कोई questions या सुझाव हो तो निचे दिया गया coment box में comment करके जरूर से बताइयेगा |
यह भी पढ़े :-