హ్ట్మ్ల్ డామ్ కాన్వెస్ ఆబ్జెక్ట్
<canvas> అంశం హెచ్‌టిఎమ్ఎల్ పేజీలో బిట్‌మాప్ రీజన్ నిర్వచిస్తుంది.
కాన్వాస్ API జావాస్క్రిప్ట్‌ని కాన్వాస్‌పై గ్రాఫిక్స్ చిత్రీకరించేందుకు అనుమతిస్తుంది.
కాన్వాస్ API రూపాలు, సిరిలైన్స్, కర్నర్స్, ఫోక్స్, టెక్స్ట్ మరియు చిత్రాలను చిత్రీకరించవచ్చు, కాలర్, రోటేషన్, ట్రాన్స్‌పరెన్సీ మరియు ఇతర పిక్సెల్ ఆపరేషన్స్ కూడా.
కాన్వాస్‌ను HTMLకు జోడించండి
మీరు <canvas> టాగ్‌ని ఉపయోగించి HTML పేజీలో ఏదైనా స్థానంలో కాన్వాస్ అంశాన్ని జోడించవచ్చు:
ఇన్స్టాన్స్
<canvas id="myCanvas" width="300" height="150"></canvas>
కాన్వాస్ అంశాన్ని ఎలా అనుసంధానించాలి
మీరు HTML DOM పద్ధతిని ఉపయోగించి <canvas> అంశాన్ని అనుసంధానించవచ్చు:
const myCanvas = document.getElementById("myCanvas");
క్యాన్వాస్ పైన గ్రాఫిక్స్ చేర్చటానికి 2D కంటెక్స్ట్ ఆబ్జెక్ట్ సృష్టించండి అని అంటే:
const ctx = myCanvas.getContext("2d");
నోట్స్
HTML <canvas> ఎలమెంట్ స్వయంగా గ్రాఫిక్స్ చేర్చటానికి సామర్థ్యం లేదు.
ఏదైనా గ్రాఫిక్స్ చేర్చటానికి మీరు జావాస్క్రిప్ట్ ఉపయోగించాలి.
getContext() మార్గం ద్వారా గ్రాఫిక్స్ టూల్స్ (మార్గాలు) కలిగిన ఒక ఆబ్జెక్ట్ తిరిగి పొందబడుతుంది.
క్యాన్వాస్ పైన గ్రాఫిక్స్ చేర్చటం
2D కంటెక్స్ట్ ఆబ్జెక్ట్ సృష్టించిన తర్వాత, మీరు క్యాన్వాస్ పైన గ్రాఫిక్స్ చేర్చవచ్చు.
క్రింది fillRect() మార్గం నుండి నలుపు కచ్చా రెక్టాంజలు చేర్చబడింది. ఈ రెక్టాంజలు 20,20 స్థానంలో ఉన్నాయి. ఈ రెక్టాంజలు వెడల్పు 150 పిక్సెల్స్, ఎత్తు 100 పిక్సెల్స్ ఉన్నాయి:
ఇన్స్టాన్స్
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);
రంగును ఉపయోగించండి
fillStyle అట్టిబట్టు గా డ్రాయింగ్ ఆబ్జెక్ట్ యొక్క పాలుపొందుటకు రంగును అమర్చుతుంది:
ఇన్స్టాన్స్
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
మీరు కూడా document.createElement() మార్గానే కొత్త <canvas> ఎలమెంట్ సృష్టించవచ్చు మరియు అదనంగా పెట్టవచ్చు ఉన్న హెచ్చి ఎల్ పేజిలో:
ఇన్స్టాన్స్
const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
మార్గం
క్యాన్వాస్ పైన గ్రాఫిక్స్ చేర్చటానికి సాధారణ మార్గం:
- పాత్రను ప్రారంభించండి - beginPath()
- ఒక పాయింటుకు తిరిగి పోండి - moveTo()
- పాత్రలో చేర్చండి - lineTo()
- పాత్రను చేర్చండి - stroke()
ఇన్స్టాన్స్
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();
రంగు, శైలి మరియు శాడో
| 属性 | 描述 |
|---|---|
| fillStyle | ఫిల్ రంగును, రంగుబద్దతను లేదా మెట్రిక్ ను అమర్చుకోండి లేదా తిరిగి పొందండి. |
| strokeStyle | స్ట్రాక్ రంగును, రంగుబద్దతను లేదా మెట్రిక్ ను అమర్చుకోండి లేదా తిరిగి పొందండి. |
| shadowColor | శాడో రంగును అమర్చుకోండి లేదా తిరిగి పొందండి. |
| shadowBlur | శాడో మేజ్యూర్ ను అమర్చుకోండి లేదా తిరిగి పొందండి. |
| shadowOffsetX | 设置或返回阴影到形状的水平距离。 |
| shadowOffsetY | 设置或返回阴影到形状的垂直距离。 |
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 创建线性渐变（用于画布内容）。 |
| createPattern() | 在指定方向重复指定的元素。 |
| createRadialGradient() | 创建径向/圆形渐变（用于画布内容）。 |
| addColorStop() | 规定渐变对象中的颜色和停止位置。 |
线条样式
| 属性 | 描述 |
|---|---|
| lineCap | 设置或返回线的端盖样式。 |
| lineJoin | 设置或返回两条线相交时创建的角的类型。 |
| lineWidth | 设置或返回当前线宽。 |
| miterLimit | గరిష్ట మిటర్ లంబిత పొడవును సెట్ చేయండి లేదా అందించండి. |
రెక్టాంజిల్
| 方法 | 描述 |
|---|---|
| rect() | రెక్టాంజిల్ సృష్టించండి. |
| fillRect() | పూరించబడిన రెక్టాంజిల్ చేయండి. |
| strokeRect() | రెక్టాంజిల్ చేయండి (పూరించకుండా). |
| clearRect() | ప్రస్తుత రెక్టాంజిల్లోని నిర్దేశించిన పిక్సెల్స్ ను శుభ్రం చేయండి. |
మార్గం
| 方法 | 描述 |
|---|---|
| fill() | ప్రస్తుత గ్రాఫిక్ను పూరించండి (మార్గం). |
| stroke() | నిర్వచించిన మార్గాన్ని నిజంగా చేయండి. |
| beginPath() | మార్గాన్ని ప్రారంభించండి లేదా ప్రస్తుత మార్గాన్ని పునఃసెట్ చేయండి. |
| moveTo() | మార్గాన్ని కాంపాస్ లోని నిర్దేశించిన పాయింట్ కు కదించండి లేదా లైన్ సృష్టించకుండా. |
| closePath() | ప్రస్తుత పాయింట్ నుండి ప్రారంభ పాయింట్ వరకు ఒక మార్గాన్ని సృష్టించండి. |
| lineTo() | ఒక కొత్త పాయింట్ జోడించండి మరియు ఆ పాయింట్ నుండి కాంపాస్ లోని చివరి నిర్దేశించిన పాయింట్ వరకు ఒక రేఖ సృష్టించండి. |
| clip() | మూల కాంపాస్ నుండి ఏదైనా ఆకారం మరియు పరిమాణం యొక్క ప్రాంతాన్ని కట్టుకొనుము. |
| quadraticCurveTo() | రెండు బేజెల్ కర్వ్స్ సృష్టించండి. |
| bezierCurveTo() | మూడు బేజెల్ కర్వ్స్ సృష్టించండి. |
| arc() | ఒక సర్కిల్/కర్వ్ సృష్టించండి (సర్కిల్ లేదా సర్కిల్ భాగం సృష్టించడానికి ఉపయోగించబడుతుంది). |
| arcTo() | రెండు స్కీర్ లైన్స్ మధ్య ఒక సర్కిల్/కర్వ్ సృష్టించండి. |
| isPointInPath() | ప్రస్తుత మార్గంలో ప్రస్తుత పాయింట్ ఉన్నట్లయితే true తిరిగి ఇవ్వండి, లేకపోతే false తిరిగి ఇవ్వండి. |
పరివర్తన
| 方法 | 描述 |
|---|---|
| scale() | ప్రస్తుత గ్రాఫిక్ను పెద్దదిగా లేదా చిన్నదిగా చేయండి. |
| rotate() | ప్రస్తుత గ్రాఫిక్ను చుట్టూ పరివర్తించండి. |
| translate() | కాంపాస్ పైన యొక్క (0,0) స్థానాన్ని పునఃమాపించండి. |
| transform() | చిత్రాన్ని ప్రస్తుత మార్పు మాట్రిక్స్ తో పునఃస్థాపించండి. |
| setTransform() | ప్రస్తుత మార్పును యూనిట్ మాట్రిక్స్ గా పునఃసెట్ చేయండి. అప్పుడు నడుపుము transform()。 |
పాఠం
| 属性 | 描述 |
|---|---|
| font | పాఠం యొక్క ప్రస్తుత ఫాంట్ అంశాలను అందించండి లేదా సెట్ చేయండి. |
| textAlign | పాఠం యొక్క ప్రస్తుత సమాంతర రూపాంతరాన్ని అందించండి లేదా సెట్ చేయండి. |
| textBaseline | 设置或返回绘制文本时使用的当前文本基线。 |
| 方法 | 描述 |
|---|---|
| fillText() | 在画布上绘制“填充”文本。 |
| strokeText() | 在画布上绘制文本（无填充）。 |
| measureText() | 返回包含指定文本宽度的对象。 |
图像绘制
| 方法 | 描述 |
|---|---|
| drawImage() | 在画布上绘制图像、画布或视频。 |
像素操作
| 属性 | 描述 |
|---|---|
| width | 返回 ImageData 对象的宽度。 |
| height | 返回 ImageData 对象的高度。 |
| data | 返回包含指定 ImageData 对象的图像数据的对象。 |
| 方法 | 描述 |
|---|---|
| createImageData() | 创建新的空白 ImageData 对象。 |
| getImageData() | 返回 ImageData 对象，该对象复制画布上指定矩形的像素数据。 |
| putImageData() | 将图像数据（来自指定的 ImageData 对象）放回画布上。 |
合成
| 属性 | 描述 |
|---|---|
| globalAlpha | 设置或返回绘图的当前 alpha 或透明度值。 |
| globalCompositeOperation | 设置或返回如何将新图像绘制到现有图像上。 |
其他
| 方法 | 描述 |
|---|---|
| save() | 保存当前上下文的状态。 |
| restore() | 返回之前保存的路径状态和属性。 |
| createEvent() | |
| getContext() | |
| toDataURL() |
