హ్ట్మ్ఎల్ కాన్వాస్ శాపిల్స్

ప్రతిపాదన

ఉదాహరణ 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();

亲自试一试

సూచన

మీరు క్షేత్రాన్ని దృశ్యం చేయడానికి కాల్చిన కాన్వెక్స్ లో నిర్వచించాలి.

తదుపరి చాప్టర్లో మీరు ఉపయోగించడానికి తెలుసుకోండి 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 参考手册