HTML కాన్వాస్ ట్యూటోరియల్

హ్ట్మ్ల్ కాన్వాస్ ఎలమెంట్ వెబ్ పేజీలో చిత్రాలను చిత్రించడానికి ఉపయోగిస్తారు.

上面的图形是用 创建的。

它显示了四个元素：红色矩形、渐变矩形、多色矩形和多色文本。

ఏమి హ్టిమ్ కాంవాస్?

హ్టిమ్ <canvas> ఎలిమెంట్ స్క్రిప్ట్ ద్వారా (సాధారణంగా JavaScript) గ్రాఫిక్స్ డైనమిక్గా చేయడానికి ఉపయోగించబడుతుంది.

<canvas> ఎలిమెంట్ గ్రాఫిక్స్ కి కేవలం కంటైనర్. మీరు లక్ష్యంగా గ్రాఫిక్స్ చేయడానికి స్క్రిప్ట్ను ఉపయోగించాలి.

Canvas పాతిలు, బాక్స్లు, చక్రాలు, పాఠాన్ని మరియు చిత్రాలను జోడించడానికి అనేక మార్గాలు ఉన్నాయి.

హ్టిమ్ కాంవాస్ పాఠాన్ని చేయవచ్చు

Canvas రంగుల పాఠంను చేయవచ్చు, అనేక అనిమేషన్లతో కూడినది.

హ్టిమ్ కాంవాస్ గ్రాఫిక్స్ ను చేయవచ్చు

Canvas గ్రాఫిక్స్ మరియు చిత్రాలను గ్రాఫికలీ ప్రదర్శించడానికి బలమైన సామర్థ్యం కలిగి ఉంటుంది.

హ్టిమ్ కాంవాస్ అనిమేషన్లను చేయవచ్చు

Canvas ఆబ్జెక్ట్లు కదిలవచ్చు. అన్నింటికీ అవకాశం ఉంది: సాధారణ బందులు నుండి కంప్లక్స్ అనిమేషన్లవరకు.

హ్టిమ్ కాంవాస్ ఇంటరాక్టివ్

Canvas జావాస్క్రిప్ట్ ఇవెంట్లను స్పందించవచ్చు.

Canvas ఏ వినియోగదారి క్రియాశీలతను స్పందించవచ్చు (కీలుకు క్లిక్, మౌస్ క్లిక్, బటన్ క్లిక్, చేతి కదలిక).

హ్టిమ్ కాంవాస్ గేమ్ కు ఉపయోగపడుతుంది

Canvas యొక్క అనిమేషన్ మాథ్యడ్స్ హ్టిమ్ గేమ్ అప్లికేషన్స్ కు అనేక అవకాశాలను అందిస్తుంది.

Canvas Example

హ్టిమ్ లో, <canvas> ఎలిమెంట్ ఈ విధంగా ఉంటుంది:

<canvas id="myCanvas" width="200" height="100"></canvas>

<canvas> ఎలిమెంట్ కి id అంశం ఉండాలి, అలాగే JavaScript ద్వారా సూచించాలి.

width మరియు height అంశాలు కాంవాస్ పరిమాణాన్ని నిర్వచించడానికి అవసరం.

సూచన: ఒక హ్టిమ్ పేజీలో కాంవాస్ ఎలిమెంట్లు అనేకంటే ఉండవచ్చు.

అప్రమేయంగా, <canvas> ఎలిమెంట్ కర్తవ్యాన్ని లేదా బార్డర్ లేదు.

కాంవాస్ పైన కర్తవ్యాన్ని జోడించడానికి, style అంశాన్ని ఉపయోగించండి:

ఉదాహరణ

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

స్వయంగా ప్రయత్నించండి

తరువాతి అధ్యాయాలు కాంవాస్ పైన చిత్రాలను చెప్పుతాయి.

మరియు ఇంకా చూడండి:

CodeW3C.com యొక్క పూర్తి Canvas సందర్శన పుస్తకం

బ్రౌజర్ మద్దతు

<canvas> ఎలిమెంట్ HTML5 ప్రమాణం (2014) లో ఉంది.

అన్ని ఆధునిక బ్రౌజర్లు <canvas> ను మద్దతు ఇస్తాయి: