HTML कैनवस रूप

उदाहरण

उदाहरण 1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

स्वयं प्रयोग करें

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

लाइन ड्राइंग के लिए कैनवस में पथ का इस्तेमाल किया जाता है:

फ़र्मां

beginPath() नया पथ शुरू करने के लिए फ़र्मां

moveTo() लाइन के शुरुआत डिफाइन करता है। यह कुछ भी नहीं ड्राइंग करता, यह केवल एक शुरुआत डिफाइन करता है。

lineTo() फ़र्मां लाइन के अंत डिफाइन करता है। यह कुछ भी नहीं ड्राइंग करता, यह केवल एक अंत डिफाइन करता है。

stroke() फ़र्मां लाइन को वास्तव में ड्राइंग करता है। मूलभूत स्ट्रोक कलर श्वेत है।

अधिक उदाहरण

उदाहरण 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

स्वयं प्रयोग करें

उदाहरण 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

स्वयं प्रयोग करें

सुझाव

चतुर्भुज ड्राइंग के लिए आपको 4 लाइन नहीं ड्राइंग करनी होगी

अगले अध्याय में आप इसके इस्तेमाल को सीखेंगे drawRect() रंग को डिफाइन करने के लिए एक रंग ड्राइंग फ़र्मां

strokeStyle गुण

strokeStyle पेंटिंग तक इस्तेमाल की जाने वाली शैली परिभाषित करता है。

फ़र्मां बुलाने से पहले stroke() सामग्री को सेट करने से पहले

उदाहरण

ctx.beginPath();
// चतुर्भुज डिफाइन
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// त्रिभुज डिफाइन
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

स्वयं प्रयोग करें

अन्य संदर्भ

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