హెచ్ టి ఎంఎల్ సైట్ టాగ్
నిర్వచనం మరియు వినియోగం
<canvas> టాగ్ సాధారణంగా స్క్రిప్ట్ ద్వారా (సాధారణంగా జావాస్క్రిప్ట్) వాస్తవానికి చిత్రాన్ని చిత్రీకరించబడుతుంది.
<canvas> టాగ్ స్పష్టంగా ఉంటుంది, ఇది చిత్రం యొక్క కంటైనర్, చిత్రాన్ని వాస్తవానికి చిత్రించడానికి స్క్రిప్ట్ ఉపయోగించాలి.
బ్రౌజర్లులో <canvas> బ్రౌజర్లో, జావాస్క్రిప్ట్ ను ఆపిన కార్యకలాపాలు మరియు మద్దతు చేయని <canvas> ఎలమెంట్ లోపల ఏదైనా టెక్స్ట్ ను ప్రదర్శించబడుతుంది
సూచన
మా HTML Canvas ట్యూటోరియల్లో గురించి తెలుసుకోండి <canvas> ఎలమెంట్ యొక్క మరిన్ని వివరాలు.
అన్ని అట్రిబ్యూట్స్ మరియు మెట్హాడ్స్ యొక్క పూర్తి సూచనను చూడడానికి మా వెబ్సైట్ని సందర్శించండి, దానిలో హెచ్ టి ఎంఎల్ కాన్వాస్ రిఫరెన్స్ హాండ్బుక్。
ఇన్స్టాన్స్
ఉదాహరణ 1
ఒక ఎరుపు రంగు నిష్కర్షనను నిర్మించండి మరియు కాంపాస్ ఎలమెంట్లో దానిని ప్రదర్శించండి:
<canvas id="myCanvas">
మీ బ్రౌజర్లు canvas టాగ్ను మద్దతు చేయలేదు.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
ఉదాహరణ 2
మరొక <canvas> ఉదాహరణ:
<canvas id="myCanvas">
మీ బ్రౌజర్లు canvas టాగ్ను మద్దతు చేయలేదు.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// పారదర్శకతను తెరుచుకోండి
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>
అట్రిబ్యూట్
| అట్రిబ్యూట్ | విలువ | వివరణ |
|---|---|---|
| height | పిక్సెల్ విలువ | కాంపాస్ యొక్క పొడవును నిర్ణయిస్తుంది. డిఫాల్ట్ విలువ అయినది 150. |
| width | పిక్సెల్ విలువ | కాంపాస్ యొక్క వెడల్పును నిర్ణయిస్తుంది. డిఫాల్ట్ విలువ అయినది 300. |
గ్లౌబల్ అట్రిబ్యూట్స్
<canvas> టాగ్ అనేక ఇవెంట్ అట్రిబ్యూట్స్ ను మద్దతు చేస్తుంది హ్ట్మ్ల్ లో గ్లౌబల్ అట్రిబ్యూట్స్。
ఇవెంట్ అట్రిబ్యూట్స్
<canvas> టాగ్ అనేక ఇవెంట్ అట్రిబ్యూట్స్ ను మద్దతు చేస్తుంది హ్ట్మ్ల్ లో ఇవెంట్ అట్రిబ్యూట్స్。
డిఫాల్ట్ CSS సెట్టింగ్స్
అనేక బ్రౌజర్లు క్రింది డిఫాల్ట్ విలువలను ప్రదర్శిస్తాయి <canvas> అంశం:
canvas {
height: 150px;
width: 300px;
}
<canvas> యొక్క చరిత్ర
ఈ HTML ఎలమెంట్ క్లయింట్ వెక్టర్ గ్రాఫిక్స్ కొరకు రూపొందించబడింది. ఇది స్వయంగా ఎలాంటి ప్రవర్తన లేదు, కానీ క్లయింట్ జావాస్క్రిప్ట్కు ఒక డ్రాయింగ్ API ప్రదర్శిస్తుంది కాబట్టి స్క్రిప్టులు అనుకొన్న ప్రాణికి కాంపాస్ లో డ్రాయింగ్ చేయగలవు.
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持
我们甚至可以在 IE 中使用
这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。
ఒకే గ్రాఫిక్స్ యొక్క ఒకే కాన్వాస్ టాగ్గును నుండి అంశాలను తొలగించడానికి, తిరిగి డ్రాయింగ్ చేయడానికి ప్రత్యేకంగా రూపకల్పనను కాల్పడించవలసినది.
కాన్వాస్ టాగ్గును ఉపయోగించి డ్రాయింగ్ చేయడం ఎలా ఉంటుంది
దినంతో కాన్వాస్ డ్రాయింగ్ API రూపొందించబడలేదు, కానీ కాన్వాస్ ద్వారా పరిగణించబడుతుంది. getContext() మాధ్యమంఒక 'డ్రాయింగ్ ఎన్విరాన్మెంట్' ఆబ్జెక్ట్ ను పొందడం జరుగుతుంది.
కాన్వాస్ API కూడా మార్గం ప్రస్తావనను ఉపయోగిస్తుంది. కానీ, మార్గం ఒక శ్రేణి మాధ్యమాలు కాల్పడినట్లు నిర్వచించబడుతుంది, కాదు అక్షరాలు మరియు సంఖ్యలతో కూడిన స్ట్రింగ్ లలో పరిగణించబడుతుంది, ఉదాహరణకు beginPath() మరియు arc() మాధ్యమాలు కాల్పడినట్లు ఉంటాయి.
మార్గాన్ని నిర్వచించిన తర్వాత, fill() వంటి ఇతర పద్ధతులు ఈ మార్గానికి పని చేస్తాయి. చిత్రకళా పరిసరం వివిధ లక్షణాలు, ఉదాహరణకు fillStyle, ఈ పనులు ఎలా ఉపయోగించబడతాయి వివరిస్తాయి.
ప్రకటన:Canvas API సరిస్తున్నది మాత్రమే కాకుండా రూపాంకనం ప్రదర్శించడానికి ఎటువంటి మద్దతు కలిగి లేదు. ఒక <canvas> రూపాంకనాన్నిలో పదబంధాన్ని చేర్చడానికి, స్వయంగా చిత్రాన్ని చేర్చి బైట్ మాప్ చిత్రంతో మిళితం చేయాలి లేదా <canvas> పైన ఉంచిన CSS స్థానాన్ని ఉపయోగించి HTML పదబంధాన్ని ఆవరించాలి.
బ్రౌజర్ మద్దతు
ఈ పట్టికలో పేర్కొన్న సంఖ్యలు ఈ కాలక్రమంలో ఈ మూలకాన్ని పూర్తిగా మద్దతు ఇస్తున్న పరిశీలకం మొదటి వెర్షన్ ను సూచిస్తాయి.
| చ్రోమ్ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఓపెరా |
|---|---|---|---|---|
| చ్రోమ్ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఓపెరా |
| 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
