HTML5 కాన్వాస్
- పూర్వ పేజీ HTML ఇన్పుట్ ఫారమ్ లక్షణాలు
- తదుపరి పేజీ 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") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
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 ఇన్పుట్ ఫారమ్ లక్షణాలు
- తదుపరి పేజీ HTML5 SVG
