HTML5 కాన్వాస్
- ముంది పేజీ HTML Input ఫారమ్ అట్రిబ్యూట్స్
- తరువాతి పేజీ HTML5 SVG
కాన్వాస్ ఎలమెంట్ అనేది వెబ్ పేజీలో చిత్రాలను చేయడానికి ఉపయోగిస్తారు.
కాన్వాస్ ఏమిటి?
హెచ్టిఎంఎల్5 కాన్వాస్ ఎలమెంట్ అనేది వెబ్ పేజీలో చిత్రాలను జావాస్క్రిప్ట్ ద్వారా చేయడానికి ఉపయోగిస్తుంది.
కాన్వాస్ అనేది ఒక చతురస్రాకార ప్రాంతం, మీరు దాని ప్రతి పిక్సెల్ను నియంత్రించవచ్చు.
కాన్వాస్ అనేది పలు డ్రాయింగ్ పాతిమార్గాలు, చతురస్రాకారాలు, చరిత్రాలు మరియు చిత్రాలను జోడించడానికి మార్గాలు కలిగి ఉంటుంది.
కాన్వాస్ ఎలమెంట్ను సృష్టించండి
హెచ్టిఎంఎల్5 పేజీకి కాన్వాస్ ఎలమెంట్ను జోడించండి.
ఎలమెంట్ యొక్క id, వెడల్పం మరియు పొడవును నిర్ధారించండి:
<canvas id="myCanvas" width="200" height="100"></canvas>
జావాస్క్రిప్ట్ ద్వారా చిత్రాలను చేయడం
కాన్వాస్ ఎలమెంట్ స్వయంగా చిత్రాన్ని చేయగల సామర్థ్యం లేదు. అన్ని చిత్రాలను జావాస్క్రిప్ట్ లోపల పూర్తి చేయాలి:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
జావాస్క్రిప్ట్ కాన్వాస్ ఎలమెంట్ను కనుగొనడానికి id ఉపయోగిస్తుంది：
var c=document.getElementById("myCanvas");
కానీ, context పద్ధతిని సృష్టించండి:
var cxt=c.getContext("2d");
getContext("2d") పద్ధతి అంతర్భాగంగా ఉన్న హెచ్చరికలు, రెండుగోలకాలు, వర్తులు, అక్షరాలను చిత్రీకరించడానికి మరియు చిత్రాలను జోడించడానికి ఉపయోగించబడుతుంది.
కింది రెండు లైన్స్ కోడ్లు ఒక ఎరుపు రెండుగోలకం చిత్రీకరించడానికి ఉపయోగిస్తాయి:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle పద్ధతి దీనిని ఎరుపు రంగులో మలచుతుంది, fillRect పద్ధతి రూపం, స్థానం మరియు పరిమాణాలను నిర్దేశిస్తుంది.
పరిమాణాలను అర్థం చేసుకోండి
పైన ఉన్న fillRect పద్ధతిలో పరిమాణాలు (0,0,150,75) ఉన్నాయి.
అర్థం అవుతుంది: కాన్వాస్ పైన 150x75 పరిమాణంలో ఒక రెండుగోలకం చిత్రీకరించండి, ఎడమ ప్రక్కన ప్రారంభం (0,0).
కింది చిత్రంలో చూచినట్లు, కాన్వాస్ యొక్క X మరియు Y పరిమాణాలు చిత్రీకరణలను నిర్దేశించడానికి ఉపయోగిస్తాయి.
మరిన్ని కాన్వాస్ ఉదాహరణలు
కాన్వాస్ ఎలమెంట్ పైన చిత్రీకరణల మరిన్ని ఉదాహరణలు కింద ఉన్నాయి:
ఉదాహరణ - పట్టిక
ప్రారంభం మరియు ముగింపు స్థానాలను నిర్దేశించి ఒక పట్టికను చిత్రీకరించండి:
JavaScript కోడ్:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
కాన్వాస్ అంశం:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> మీ బ్రౌజర్ కాన్వాస్ అంశాన్ని మద్దతు చేయలేదు. </canvas>
ఉదాహరణ - వర్తులు
పరిమాణం, రంగు, స్థానాన్ని నిర్దేశించి ఒక వర్తులును చిత్రీకరించండి:
JavaScript కోడ్:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
కాన్వాస్ అంశం:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> మీ బ్రౌజర్ కాన్వాస్ అంశాన్ని మద్దతు చేయలేదు. </canvas>
ఉదాహరణ - క్రమంగా రంగులు
మీ పేరుము అనుసరించి రంగులను ఉపయోగించి క్రమంగా బేక్‌గ్రౌండ్ చిత్రాన్ని చిత్రీకరించండి:
JavaScript కోడ్:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
కాన్వాస్ అంశం:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> మీ బ్రౌజర్ కాన్వాస్ అంశాన్ని మద్దతు చేయలేదు. </canvas>
ఇన్స్టాన్స్ - చిత్రం
ఒక చిత్రాన్ని కాన్వాస్ లో చేర్చండి:
JavaScript కోడ్:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
కాన్వాస్ అంశం:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> మీ బ్రౌజర్ కాన్వాస్ టాగ్ ను మద్దతు చేయలేదు. </canvas>
HTML కాన్వాస్ శిక్షణ
కాన్వాస్ గురించి మరింత తెలుసుకోవడానికి మా సైట్ సందర్శించండి: HTML కాన్వాస్ శిక్షణ.
- ముంది పేజీ HTML Input ఫారమ్ అట్రిబ్యూట్స్
- తరువాతి పేజీ HTML5 SVG
