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 参考手册