HTML కాన్వాస్ కోఆర్డినేట్స్

కాన్వెక్స్ కోణాలు

HTML కాన్వెక్స్ ఒక రెండుదశాకార గ్రిడ్ ఉంటుంది.

కాన్వెక్స్‌యొక్క ఎడమ పైకి కోణం (0,0) గా ఉంటుంది.

గత చాప్టర్‌లో మేము ఈ పద్ధతిని ఉపయోగించాము: fillRect(0,0,150,75).

అర్థం చెప్పగలదు: ఎక్కువగా ఎక్కువ నుండి ఎక్కువగా కుడివెళ్ళి ఒక 150x75 పిక్సెల్స్ రెక్టాంజిల్ చిత్రించండి.

కోణాల ఉదాహరణ

క్రింది నిలువు రెక్టాంజిల్‌పై మౌస్ ను ముద్దగించినప్పుడు దాని x మరియు y కోణాలను చూడవచ్చు:

లైన్ చిత్రించండి

కాన్వెక్స్‌లో లైన్ చిత్రించడానికి కొరకు ఈ పద్ధతులను ఉపయోగించండి:

• moveTo(x,y) - లైన్ ప్రారంభం నిర్వచించండి
• lineTo(x,y) - లైన్ ముగింపు నిర్వచించండి

వాస్తవానికి గాను లైన్ చిత్రించడానికి, 'రంగు' పద్ధతులలో ఒకదాన్ని ఉపయోగించాలి, ఉదాహరణకు stroke().

实例

స్థానం (0,0) లో ప్రారంభం నిర్వచించండి, స్థానం (200,100) లో ముగింపు నిర్వచించండి. ఈ తరువాత stroke() పద్ధతిని ఉపయోగించి వాస్తవానికి గాను లైన్ చిత్రించండి:

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

亲自试一试

ఒక చక్రాన్ని చిత్రించండి

కాన్వెక్స్‌లో చక్రాన్ని చిత్రించడానికి కొరకు ఈ పద్ధతులను ఉపయోగించండి:

• beginPath() - ఒక మార్గాన్ని ప్రారంభించండి
• arc(x,y,r,startangle,endangle) - చక్రార్క్ / కర్ణాకరణం సృష్టించండి

arc() మీదుగా ఒక చక్రాన్ని సృష్టించడానికి కొరకు ప్రారంభ కోణాన్ని 0 గా మరియు ముగింపు కోణాన్ని 2 * Math.PI గా సెట్ చేయండి. x మరియు y పారామీటర్స్ చక్రం కేంద్రం యొక్క x మరియు y కోణాలను నిర్వచిస్తాయి. r పారామీటర్ చక్రం వ్యాసాన్ని నిర్వచిస్తాయి.

实例

使用 arc() 方法定义一个圆。然后使用 stroke() 方法来实际绘制圆：

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

亲自试一试

另请参阅：

CodeW3C.com 的完整 Canvas 参考手册