HTML DOM कैनवास ऑब्जेक्ट HTML5 में पेश किए गए <कैनवास> तत्व से जुड़ा है। जावास्क्रिप्ट की मदद से ग्राफिक्स बनाने के लिए <कैनवास> टैग का उपयोग किया जाता है। कैनवास ग्राफिक्स के लिए एक कंटेनर के रूप में कार्य करता है। कैनवास पर, हम रेखाएँ, आकृतियाँ आदि बना सकते हैं।
गुण
कैनवास ऑब्जेक्ट के लिए निम्नलिखित गुण हैं -
| संपत्ति | <थ>विवरण|
|---|---|
| भरें स्टाइल | रंग, ढाल या पैटर्न को सेट करने या वापस करने के लिए जिसका उपयोग ड्राइंग को भरने के लिए किया जाता है। |
| स्ट्रोक स्टाइल | स्ट्रोक के लिए उपयोग किए गए रंग, ग्रेडिएंट या पैटर्न को सेट या वापस करने के लिए। |
| छाया रंग | छाया के लिए उपयोग किए जाने वाले रंग को सेट करने या वापस करने के लिए। |
| छाया धुंधला | छाया के धुंधले स्तर को सेट करने या वापस करने के लिए। |
| shadowOffsetX | आकृति से छाया की क्षैतिज दूरी निर्धारित करने या वापस करने के लिए। |
| shadowOffsetY | आकृति से छाया की लंबवत दूरी निर्धारित करने या वापस करने के लिए। |
तरीके
कैनवास ऑब्जेक्ट की विधियाँ निम्नलिखित हैं -
| विधि | <वें शैली ="चौड़ाई:71.9727%;">विवरण|
|---|---|
| createLinearGradient() | रैखिक ग्रेडिएंट बनाने के लिए। |
| createPattern() | एक निर्दिष्ट तत्व को एक दिशा में दोहराकर एक पैटर्न बनाने के लिए। |
| shadowColor | छाया के लिए उपयोग किए जाने वाले रंग को सेट या वापस करने के लिए। |
| createRadialGradient() | एक गोलाकार ढाल बनाने के लिए। |
| addColorStop() | आकृति से छाया की क्षैतिज दूरी सेट करने या वापस करने के लिए। |
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैकैनवास ऑब्जेक्ट बनाना -
var x=document.createElement("CANVAS"); उदाहरण
आइए हम HTML DOM कैनवास ऑब्जेक्ट का एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 1px double blue;
margin:1em;
}
</style>
</head>
<body>
<h1>CANVAS</h1>
<button onclick="createCanvas()">CREATE</button>
<p>Click the above button to create a CANVAS element with a green circle in it</p>
<script>
function createCanvas() {
var x = document.createElement("CANVAS");
var ctx = x.getContext("2d");
ctx.fillStyle = "#C7EA46";
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
document.body.appendChild(x);
}
</script>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट देगा -
क्रिएट -
. पर क्लिक करने पर
उपरोक्त उदाहरण में -
हमने सबसे पहले CREATE बटन बनाया है, जिस पर क्लिक करने पर createCanvas () विधि निष्पादित हो जाएगी।
<button onclick="createCanvas()">CREATE</button>
createCanvas () विधि एक <कैनवास> तत्व बनाता है। फिर हम getContext () विधि का उपयोग करके नव निर्मित <कैनवास> तत्व के लिए संदर्भ प्राप्त करते हैं। प्रत्येक कैनवास विधि से केवल एक संदर्भ जुड़ा हो सकता है। getContext() विधि के अंदर पैरामीटर मान "2d" निर्दिष्ट करता है कि इसका उपयोग केवल आकार, आकार यानी 2d सामान खींचने के लिए किया जाएगा। फिर हम फिलस्टाइल का उपयोग करके भरण रंग सेट करते हैं और पथ शुरू करने के लिए startPath() विधि का उपयोग करते हैं।
उसके बाद, सर्कल को-ऑर्डिनेट्स को परिभाषित करने के लिए आर्क () मेथड का उपयोग करें और उस सर्कल को फिलस्टाइल कलर से भरें। अंत में हम स्ट्रोक () विधि का उपयोग वास्तव में कैनवास पर आकर्षित करने के लिए करते हैं और दस्तावेज़ के एपेंड चाइल्ड () विधि का उपयोग करके कैनवास को बॉडी एलिमेंट के बच्चे के रूप में जोड़ते हैं। बॉडी -
function createCanvas() {
var x = document.createElement("CANVAS");
var ctx = x.getContext("2d");
ctx.fillStyle = "#C7EA46";
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
document.body.appendChild(x);
}