HTML कैनवस ड्राइंग

कैनवस पर जेसक्रिप्ट ड्राइंग

HTML कैनवस पर सभी ड्राइंग को JavaScript के द्वारा पूर्ण किया जाना है:

इस्तेमाल

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>

स्वयं को प्रयोग कीजिए

पहला कदम: कैनवस एलेमेंट खोजें

पहले, आपको <canvas> एलेमेंट खोजना है।

यह HTML DOM विधि getElementById() के द्वारा पूर्ण होता है:

const canvas = document.getElementById("myCanvas");

दूसरा कदम: ड्राइंग ऑब्जेक्ट बनाएं

इसके अलावा, आपको एक कैनवस ड्राइंग ऑब्जेक्ट की जरूरत है。

getContext() एक अंतर्निहित HTML ऑब्जेक्ट है, जो ड्राइंग के लिए गुण और विधियाँ प्रदान करता है:

const ctx = canvas.getContext("2d");

चौथा कदम: कैनवस पर ड्राइंग करें

अंत में, आप कैनवस पर ड्राइंग कर सकते हैं。

ड्राइंग ऑब्जेक्ट के फिल्टर शैली को लाल रंग में सेट करें:

ctx.fillStyle = "#FF0000";

fillStyle गुण का मूलभूत फिल्टर शैली श्वेत है।

fillRect(x,y,width,height) विधि कैनवस पर एक चतुर्भुज दूरी ड्राइंग करता है, फिल्टर शैली के द्वारा भरा जाता है:

ctx.fillRect(0, 0, 150, 75);

और देखें:

CodeW3C.com का पूरा Canvas संदर्भ मानचित्र