HTML कैनवास आरेखण
जावास्क्रिप्ट के साथ कैनवास पर ड्रा करें
HTML कैनवास पर सभी आरेखण जावास्क्रिप्ट के साथ किए जाने चाहिए:
उदाहरण
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
चरण 1: कैनवास तत्व खोजें
सबसे पहले, आपको <कैनवास> तत्व को खोजना होगा।
यह HTML DOM विधि getElementById () का उपयोग करके किया जाता है:
var canvas = document.getElementById("myCanvas");
चरण 2: एक ड्रॉइंग ऑब्जेक्ट बनाएं
दूसरे, आपको कैनवास के लिए एक ड्राइंग ऑब्जेक्ट की आवश्यकता है।
getContext() एक अंतर्निहित HTML ऑब्जेक्ट है, जिसमें ड्राइंग के लिए गुण और विधियाँ हैं:
var ctx = canvas.getContext("2d");
चरण 3: कैनवास पर ड्रा करें
अंत में, आप कैनवास पर आकर्षित कर सकते हैं।
ड्राइंग ऑब्जेक्ट की भरण शैली को लाल रंग पर सेट करें:
ctx.fillStyle = "#FF0000";
fillStyle गुण एक CSS रंग, एक ग्रेडिएंट या एक पैटर्न हो सकता है। डिफ़ॉल्ट भरण शैली काला है।
fillRect( x,y,width,height ) विधि कैनवास पर भरण शैली से भरा एक आयत खींचती है:
ctx.fillRect(0, 0, 150, 75);