एचटीएमएल <कैनवास> टैग
उदाहरण
मक्खी पर एक लाल आयत बनाएं, और इसे <कैनवास> तत्व के अंदर दिखाएं:
<canvas id="myCanvas">
Your browser
does not support the canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
टैग का <canvas>उपयोग स्क्रिप्टिंग (आमतौर पर जावास्क्रिप्ट) के माध्यम से, मक्खी पर ग्राफिक्स खींचने के लिए किया जाता है।
टैग पारदर्शी है, और ग्राफिक्स के <canvas>लिए केवल एक कंटेनर है, आपको वास्तव में ग्राफिक्स खींचने के लिए एक स्क्रिप्ट का उपयोग करना चाहिए।
तत्व के अंदर कोई भी पाठ <canvas>जावास्क्रिप्ट अक्षम ब्राउज़रों में और उन ब्राउज़रों में प्रदर्शित किया जाएगा जो समर्थन नहीं करते हैं <canvas>।
टिप्स और नोट्स
युक्ति: हमारे HTML कैनवास ट्यूटोरियल<canvas> में तत्व
के बारे में अधिक जानें ।
युक्ति: सभी गुणों और विधियों के संपूर्ण संदर्भ के लिए, कृपया हमारे HTML कैनवास संदर्भ पर जाएँ ।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से तत्व का समर्थन करता है।
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
गुण
| Attribute | Value | Description |
|---|---|---|
| height | pixels | Specifies the height of the canvas. Default value is 150 |
| width | pixels | Specifies the width of the canvas Default value is 300 |
वैश्विक गुण
<canvas>टैग HTML में वैश्विक विशेषताओं का भी समर्थन करता है ।
घटना गुण
<canvas>टैग HTML में ईवेंट विशेषताओं का भी समर्थन करता है ।
और ज्यादा उदाहरण
उदाहरण
एक और <कैनवास> उदाहरण:
<canvas id="myCanvas">
Your browser does not
support the canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20,
20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle
= "green";
ctx.fillRect(80, 80, 75, 50);
</script>
डिफ़ॉल्ट सीएसएस सेटिंग्स
अधिकांश ब्राउज़र <canvas>निम्न डिफ़ॉल्ट मानों के साथ तत्व प्रदर्शित करेंगे:
उदाहरण
canvas {
height: 150px;
width: 300px;
}