HTML कैनवस लाइन

उदाहरण

// चित्रफलक बनाना:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// एक नया पथ परिभाषित करना:
ctx.beginPath();
// प्रारंभिक बिंदु परिभाषित करना:
ctx.moveTo(0, 0);
// अंतिम बिंदु परिभाषित करना:
ctx.lineTo(200, 100);
// आरेखित करना:
ctx.stroke();

स्वयं प्रयास करें

Canvas लकीर आरेखन

लकीर आरेखन के लिए चित्रफलक में पथ का इस्तेमाल किया जाता है:

तरीका

beginPath() विधा एक नया पथ शुरू करती है। यह कुछ भी आरेखित नहीं करती, यह केवल एक नया पथ परिभाषित करती है।

moveTo() विधा लकीर के प्रारंभिक बिंदु को परिभाषित करती है। यह कुछ भी आरेखित नहीं करती, यह केवल एक प्रारंभिक बिंदु सेट करती है।

lineTo() विधा लकीर के अंतिम बिंदु को परिभाषित करती है। यह कुछ भी आरेखित नहीं करती, यह केवल एक अंतिम बिंदु सेट करती है।

stroke() विधा वास्तव में लकीर को आरेखित करती है। मूलभूत रंग श्वेत है।

lineWidth विशेषता

lineWidth विशेषता चित्रफलक में आरेखित करने के लिए इस्तेमाल की जाने वाली लकीर चौड़ाई को परिभाषित करती है.

इसे stroke() विधि को बुलाने से पहले सेट करना आवश्यक है.

उदाहरण

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

स्वयं प्रयास करें

strokeStyle विशेषता

strokeStyle विशेषता चित्रफलक में आरेखित करने के लिए इस्तेमाल की जाने वाली शैली को परिभाषित करती है.

इसे stroke() विधि को बुलाने से पहले सेट करना आवश्यक है.

उदाहरण

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

स्वयं प्रयास करें

lineCap विशेषता

lineCap विशेषता लकीर के छोर की शैली (butt, round या square) को परिभाषित करती है.

मूलभूत रूप से square (वर्गाकार) है.

इसे stroke() विधि को बुलाने से पहले सेट करना आवश्यक है.

उदाहरण

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

स्वयं प्रयास करें

दूसरे के लिए देखें:

CodeW3C.com का पूरा Canvas संदर्भ मैनुअल