जावास्क्रिप्ट के माध्यम से कैनवास पर आयतों को चित्रित करना

वर्ग और आयतों को अवश्य moveTo, lineTo के संयोजन का उपयोग करके नहीं चित्रित करना चाहिए - इसके लिए सरल विधियाँ हैं। आइए उन्हें समझते हैं।

strokeRect विधि

strokeRect(x, y, चौड़ाई, ऊँचाई) विधि दिए गए बिंदु पर एक आयत की रूपरेखा चित्रित करती है। पहले दो पैरामीटर उस बिंदु के निर्देशांक निर्दिष्ट करते हैं, जहाँ चित्रित आयत का ऊपरी बायाँ कोना स्थित होगा।

आइए strokeRect का उपयोग करके एक आयत चित्रित करें (मान लें कि ctx पहले से मौजूद है):

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.strokeRect(50, 50, 100, 75);

Результат:

fillRect विधि

fillRect(x, y, चौड़ाई, ऊँचाई) विधि भी strokeRect की तरह ही काम करती है, लेकिन केवल एक भरा हुआ आयत चित्रित करती है। आइए एक उदाहरण देखें:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillRect(50, 50, 100, 75);

Результат:

rect विधि

अगली विधि rect(x, y, चौड़ाई, ऊँचाई) भी एक आयत चित्रित करती है। लेकिन यह आयत तभी दिखाई देगी, यदि stroke या fill विधि लागू की जाए। पहले मामले में रूपरेखा होगी, और दूसरे मामले में - भरी हुई आकृति होगी।

आइए rect का उपयोग करके एक रूपरेखा चित्रित करें:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.stroke();

Результат:

और अब एक भरी हुई आकृति चित्रित करें:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.fill();

Результат:

clearRect विधि

अगली विधि clearRect(x, y, चौड़ाई, ऊँचाई) एक इरेज़र की तरह काम करती है, एक आयताकार क्षेत्र को साफ़ करती है और सामग्री को पूरी तरह से पारदर्शी बना देती है।

आइए fillRect का उपयोग करके एक वर्ग चित्रित करें और clearRect का उपयोग करके इसके एक हिस्से को मिटा दें:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);

Результат: