HTML5 డ్రా ట్యుటోరియల్: కాన్వాస్ డ్రాయింగ్ యొక్క ప్రాథమికాలు

విషయము

• వెబ్ ప్రమాణాల ప్రాముఖ్యత
• ప్రాథమిక HTML5 వెబ్‌పేజీని సృష్టిస్తోంది
• HTML5 కాన్వాస్ ఎలిమెంట్‌ను కలుపుతోంది
• HTML5 కాన్వాస్‌పై గీయడానికి జావాస్క్రిప్ట్‌ని ఉపయోగించడం
• ఉదాహరణ 1: HTML5 కాన్వాస్‌పై కొన్ని దీర్ఘచతురస్రాలను గీయడం
• ఉదాహరణ 2: HTML5 కాన్వాస్‌పై స్మైలీ ఫేస్ గీయడం
• నాకు క్లోజ్‌పాత్ () అవసరమా?
• స్మైలీ ఫేస్ డ్రాయింగ్ ఎలా పనిచేస్తుంది?
• HTML5 కాన్వాస్‌పై ఆర్క్‌లను ఎలా గీయాలి
• మరిన్ని HTML5 ట్యుటోరియల్స్

సిమియన్ విస్సర్ టెక్నాలజీ మరియు ట్రావెల్ వంటి విషయాలను కవర్ చేసే రచయిత.

ఈ ట్యుటోరియల్‌లో, మీ వెబ్‌సైట్ కోసం అద్భుతమైన గ్రాఫిక్‌లను సృష్టించడానికి HTML5 లోని కాన్వాస్ మూలకాన్ని ఎలా ఉపయోగించాలో నేను ప్రదర్శించబోతున్నాను. HTML5 వెబ్ ప్రమాణం HTML కు కొన్ని క్రొత్త లక్షణాలను జోడిస్తుంది, ఇది అన్ని వెబ్‌పేజీల భాష. ఈ క్రొత్త లక్షణాలలో ఒకటి కాన్వాస్ మూలకం. కాన్వాస్ జావాస్క్రిప్ట్ కోడ్ ఉపయోగించి గీయడానికి మిమ్మల్ని అనుమతిస్తుంది, కాబట్టి మీరు ప్రదర్శించబడే వాటితో చాలా సృజనాత్మకంగా ఉండవచ్చు. కొన్ని ప్రాథమిక డ్రాయింగ్ లక్షణాలను ఉపయోగించే HTML5 కాన్వాస్ డ్రాయింగ్ యొక్క రెండు ఉదాహరణలను నేను చర్చిస్తాను.

ఈ ట్యుటోరియల్ HTML ఎలా పనిచేస్తుందనే దాని గురించి కొంచెం తెలిసిన కానీ కాన్వాస్ మూలకంతో పరిచయం లేని వ్యక్తులను లక్ష్యంగా చేసుకుంది. మీరు వెబ్ అభివృద్ధిలో ప్రారంభించవచ్చు లేదా మీరు HTML5 లోని కాన్వాస్ మూలకం గురించి మరింత తెలుసుకోవాలనుకోవచ్చు. ఈ ట్యుటోరియల్ చాలా నేపథ్య జ్ఞానాన్ని without హించకుండా అన్ని దశలను దాటుతుంది. HTML గురించి కొంచెం చదవమని నేను సిఫార్సు చేస్తున్నాను, అందువల్ల ఒక మూలకం ఏమిటో మరియు HTML మార్కప్ సాధారణంగా ఎలా ఉంటుందో మీకు తెలుస్తుంది. ఏదో అస్పష్టంగా ఉంటే, దయచేసి క్రింద ఒక వ్యాఖ్యను ఇవ్వండి.

వెబ్ ప్రమాణాల ప్రాముఖ్యత

చాలా కంప్యూటర్లు మరియు వెబ్ బ్రౌజర్‌లు ఇంటర్నెట్‌ను యాక్సెస్ చేస్తున్నందున, ఉన్న అన్ని వెబ్ ప్రమాణాలకు అనుగుణంగా ఉండటం చాలా ముఖ్యం. మీరు HTML5 లో వెబ్‌పేజీని వ్రాస్తుంటే, HTML5 వెబ్ ప్రమాణం ప్రకారం ఇది చెల్లుబాటు అవుతుందని మీరు నిర్ధారించుకోవాలి. మీ వెబ్‌పేజీ వాస్తవానికి HTML5 వెబ్‌పేజీ అని నిర్ధారించుకోవడానికి మీరు W3C వాలిడేటర్‌ను ఉపయోగించవచ్చు. అందువల్ల మేము ప్రాథమిక ఖాళీ HTML5- చెల్లుబాటు అయ్యే వెబ్‌పేజీతో ప్రారంభిస్తాము, ఆపై కాన్వాస్‌పై గీయడానికి అవసరమైన అన్ని విషయాలను జోడిస్తాను.

ప్రాథమిక HTML5 వెబ్‌పేజీని సృష్టిస్తోంది

మొదటి దశ కొన్ని HTML5 కోడ్‌తో ప్రాథమిక .html ఫైల్‌ను సృష్టించడం. ఇది మా ఖాళీ HTML5 పేజీ. ఈ ట్యుటోరియల్ యొక్క తరువాతి దశలలో మనం ఏదో గీయడానికి కాన్వాస్ మరియు జావాస్క్రిప్ట్ కోడ్‌ను జోడిస్తాము.

మీరు చేయవలసినది ఇక్కడ ఉంది:

• టెక్స్ట్ ఎడిటర్‌ను తెరవండి.
• దిగువ కోడ్‌ను కాపీ చేసి క్రొత్త ఫైల్‌లో ఉంచండి
• ఫైల్‌ను ప్రాథమిక టెక్స్ట్ ఫైల్‌గా సేవ్ చేసి .html తో ముగిసే పేరును ఇవ్వండి (ఇది name.html లాంటిది అని నిర్ధారించుకోండి మరియు name.html.txt కాదు. అదే సందర్భంలో మీరు పేరు మార్చాలి మరియు దాన్ని మళ్ళీ తెరవాలి మీ టెక్స్ట్ ఎడిటర్).

మీరు విండోస్ ఉపయోగిస్తుంటే మీరు నోట్ప్యాడ్ లేదా WordPad ను ఉపయోగించాలి కాని Microsoft Word కాదు. దీనికి కారణం ఏమిటంటే, మీరు మీ పనిని అదనపు టెక్స్ట్ ఫైల్‌గా సేవ్ చేయాలనుకుంటున్నారు, అదనపు సమాచారంతో కాదు. మీరు GNU / Linux లేదా Mac OS X ను ఉపయోగిస్తుంటే, మీకు ఇష్టమైన టెక్స్ట్ ఎడిటర్‌ని ఉపయోగించండి, అది ప్రాథమిక టెక్స్ట్ ఫైల్‌లను సులభంగా సృష్టించడానికి మరియు సేవ్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది. ప్రోగ్రామర్లు మరియు వెబ్ డెవలపర్‌ల కోసం అదనపు లక్షణాలను కలిగి ఉన్న ప్రోగ్రామర్ టెక్స్ట్ ఎడిటర్లలో ఒకదాన్ని ఉపయోగించడం ఇంకా మంచిది. కానీ చింతించకండి: మీరు వెబ్ అభివృద్ధి మరియు కంప్యూటర్ ప్రోగ్రామింగ్‌లో ఎక్కువగా ఉన్నప్పుడు మీరు ఎప్పుడైనా వాటిలో ఒకదాన్ని డౌన్‌లోడ్ చేసుకోవచ్చు.

ఇక్కడ ఖాళీ HTML5 వెబ్‌పేజీ ఉంది:

! DOCTYPE html> html> head> meta http-equal = "content-type" content = "text / html; charset = UTF-8"> title> HTML5 ట్యుటోరియల్: కాన్వాస్ డ్రాయింగ్ యొక్క ప్రాథమికాలు / శీర్షిక> / తల> శరీరం> / body> / html>

మీ వెబ్ బ్రౌజర్‌లో ఈ ఫైల్‌ను తెరవండి. మీరు ఖాళీ పేజీని చూడాలి మరియు వెబ్‌పేజీ యొక్క శీర్షిక "HTML5 ట్యుటోరియల్: బేసిక్స్ ఆఫ్ కాన్వాస్ డ్రాయింగ్". మీరు దీన్ని చూడగలిగితే, మీరు విజయవంతంగా HTML5 వెబ్‌పేజీని సృష్టించారు.

మీరు HTML లేదా కంప్యూటర్ కోడ్ వ్రాస్తున్నప్పుడు మీరు సరిగ్గా చేస్తున్నారో లేదో క్రమం తప్పకుండా తనిఖీ చేయడం ముఖ్యం. మీరు కొన్ని బిట్స్ కోడ్‌ను వ్రాస్తారు, ఆపై వెబ్‌పేజీ మీరు చూడాలనుకునే విధంగా కనిపిస్తుందో లేదో తనిఖీ చేయండి. అది జరిగితే మీరు తదుపరి విషయానికి వెళ్ళవచ్చు మరియు అలా చేయకపోతే మీరు వెంటనే దాన్ని పరిష్కరించవచ్చు.

ప్రతి HTML వెబ్‌పేజీలో ఒక html మూలకం ఉంటుంది మరియు అందులో హెడ్ ఎలిమెంట్ మరియు బాడీ ఎలిమెంట్ ఉంటుంది. తలలో మీరు పేజీలో భాగం కాని అన్ని రకాల సమాచారాన్ని కనుగొనవచ్చు, కాని టైటిల్ లేదా ఇతర ఫైళ్ళకు లింకులు (CSS మరియు జావాస్క్రిప్ట్ ఫైల్స్ వంటివి) వంటివి ఇంకా అవసరం. ప్రస్తుతానికి మేము టైటిల్ ఎలిమెంట్‌ను మాత్రమే ఉపయోగిస్తాము. మీరు చూడగలిగినట్లుగా శరీర మూలకం ఖాళీగా ఉంది మరియు అందుకే వెబ్‌పేజీలో ఏమీ లేదు! మేము ఇప్పుడు వెబ్‌పేజీ యొక్క ఆ భాగాన్ని గీయడానికి అనుమతించే కాన్వాస్ మూలకాన్ని జోడించబోతున్నాము.

HTML5 కాన్వాస్ ఎలిమెంట్‌ను కలుపుతోంది

పై HTML5 వెబ్‌పేజీ యొక్క శరీర మూలకానికి ఈ క్రింది వాటిని జోడించడం ద్వారా మీరు కాన్వాస్ మూలకాన్ని జోడించవచ్చు:

canvas id = "mycanvas" width = "300" height = "300"> / కాన్వాస్>

దీని అర్థం ఏమిటి? ఐడి, వెడల్పు మరియు ఎత్తు లక్షణాలతో మీరు కాన్వాస్ మూలకాన్ని నిర్వచించారని దీని అర్థం. ఈ ట్యుటోరియల్ కోసం ఇవన్నీ అవసరం. మీరు కాన్వాస్ యొక్క వెడల్పు మరియు ఎత్తును పిక్సెల్‌ల సంఖ్యలో పేర్కొనాలి కాబట్టి వెబ్ బ్రౌజర్‌కు కాన్వాస్ ఎంత పెద్దదో తెలుసు. మీరు కాన్వాస్ యొక్క కొలతలు పేర్కొనకపోతే డిఫాల్ట్ వెడల్పు 300 పిక్సెల్స్ మరియు డిఫాల్ట్ ఎత్తు 150 పిక్సెల్స్. మా ట్యుటోరియల్‌లో మనకు పెద్ద కాన్వాస్ అవసరం కాబట్టి మేము 300 వెడల్పు మరియు 300 ఎత్తును ఉపయోగిస్తాము.

ఐడి ఐడెంటిఫైయర్‌గా అవసరం కాబట్టి మన జావాస్క్రిప్ట్ కోడ్‌లోని కాన్వాస్‌ను సూచించవచ్చు. ఈ ఐడి మీ వెబ్‌పేజీలో ప్రత్యేకంగా ఉండాలి - అదే ఐడితో మీకు మరొక మూలకం ఉండకూడదు.

మీ HTML5 వెబ్‌పేజీ ఇప్పుడు ఇలా ఉండాలి:

! DOCTYPE html> html> head> meta http-equal = "content-type" content = "text / html; charset = UTF-8"> title> HTML5 ట్యుటోరియల్: కాన్వాస్ డ్రాయింగ్ యొక్క ప్రాథమికాలు / శీర్షిక> / తల> శరీరం> కాన్వాస్ id = "mycanvas" width = "300" height = "300"> / కాన్వాస్> / body> / html>

మీరు మీ బ్రౌజర్‌లో వెబ్‌పేజీని చూస్తే, వెబ్‌పేజీ ఇంతకు ముందు ఎలా ఉందో పోలిస్తే మీకు తేడా కనిపించదు. ఇది ఇప్పటికీ తెల్లని ఖాళీ వెబ్‌పేజీ. ఎందుకంటే మేము ఇంకా కాన్వాస్‌పై ఏమీ గీయలేదు: కాన్వాస్ ఉంది కాని నేపథ్య రంగు అప్రమేయంగా తెల్లగా ఉంటుంది కాబట్టి మీరు ఇంకా చూడలేరు.

కాన్వాస్‌పై గీయడానికి ఇది సమయం!

HTML5 కాన్వాస్‌పై గీయడానికి జావాస్క్రిప్ట్‌ని ఉపయోగించడం

HTML5 కాన్వాస్‌పై గీయడానికి మీరు కొన్ని జావాస్క్రిప్ట్ కోడ్‌ను వ్రాయాలి, అది గీయవలసినది ఏమిటో చెబుతుంది. జావాస్క్రిప్ట్ వెబ్ కోసం బాగా తెలిసిన స్క్రిప్టింగ్ భాష మరియు ఇది ఇంటరాక్టివ్ వెబ్‌సైట్లు మరియు వెబ్ అప్లికేషన్స్ వంటి అనేక విషయాలకు ఉపయోగించబడింది.

ఇక్కడ మనం చేయవలసింది ఏమిటంటే: కాన్వాస్ మూలకాన్ని సూచించడానికి మేము ఒక మార్గాన్ని కనుగొనాలి, ఆపై కాన్వాస్‌పై గీయడానికి కొన్ని ఆదేశాలను వ్రాయాలి. కాన్వాస్ యొక్క డ్రాయింగ్ సందర్భం అని పిలవడం ద్వారా మేము దీన్ని చేస్తాము. డ్రా చేయవలసిన వాటిని పేర్కొనే కొన్ని ఆదేశాలను అమలు చేయడానికి మేము సందర్భాన్ని ఉపయోగించవచ్చు.

కింది వాటిని పరిశీలించండి మరియు మీ వెబ్‌పేజీ కూడా ఇలాగే ఉందని నిర్ధారించుకోండి:

! DOCTYPE html> html> head> meta http-equal = "content-type" content = "text / html; charset = UTF-8"> title> HTML5 ట్యుటోరియల్: కాన్వాస్ డ్రాయింగ్ యొక్క ప్రాథమికాలు / శీర్షిక> / తల> శరీరం> కాన్వాస్ id = "mycanvas" width = "300" height = "300"> / కాన్వాస్> స్క్రిప్ట్ రకం = "text / javascript"> var canvas = document.getElementById ('mycanvas'); var ctx = canvas.getContext ('2d'); / script> / body> / html>

మేము రెండు పంక్తుల కోడ్‌తో కొన్ని జావాస్క్రిప్ట్‌ను జోడించాము. మొదటి పంక్తి కాన్వాస్ అనే వేరియబుల్‌ను సృష్టిస్తుంది, ఇందులో కాన్వాస్ మూలకం ఉంటుంది. మీరు వేరే ఐడిని ఉపయోగించినట్లయితే, మీరు కూడా ఈ పంక్తిని మార్చాలి. GetElementById ఫంక్షన్ మీకు ఆ ఐడితో HTML పత్రంలోని మూలకాన్ని ఇస్తుంది కాబట్టి మీరు కాన్వాస్ యొక్క ఐడితో మూలకం కోసం శోధించడం చాలా ముఖ్యం. రెండవ పంక్తి కాన్వాస్ మూలకం యొక్క డ్రాయింగ్ సందర్భంతో వేరియబుల్ సిటిఎక్స్ ఇస్తుంది. ఈ సందర్భంలో ఇది 2D డ్రాయింగ్ సందర్భం ఎందుకంటే మేము రెండు డైమెన్షనల్ డ్రాయింగ్లను చేయబోతున్నాం.

ఉదాహరణ 1: HTML5 కాన్వాస్‌పై కొన్ని దీర్ఘచతురస్రాలను గీయడం

సాధారణమైన వాటితో ప్రారంభిద్దాం-కొన్ని దీర్ఘచతురస్రాలు! మీ వెబ్‌పేజీ యొక్క జావాస్క్రిప్ట్ కోడ్‌కు క్రింది కోడ్‌ను జోడించండి:

ctx.strokeStyle = "rgb (0, 0, 255)"; ctx.strokeRect (10, 10, 50, 50); ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (30, 30, 50, 50);

పై కోడ్‌ను అర్థం చేసుకోవడానికి మనం స్ట్రోకింగ్ మరియు ఫిల్లింగ్ మధ్య వ్యత్యాసాన్ని తెలుసుకోవాలి. మీరు స్ట్రోక్ చేసినప్పుడు మీరు దీర్ఘచతురస్రం యొక్క రూపురేఖలను గీయండి మరియు మీరు నింపినప్పుడు మీరు దీర్ఘచతురస్రం లోపలి భాగంలో కూడా రంగు వేస్తారు. మీరు స్ట్రోక్ లేదా పూరించే రంగును మార్చడానికి, మీరు స్ట్రోక్‌స్టైల్ లేదా ఫిల్‌స్టైల్ మార్చాలి. ఆ తరువాత మీరు స్ట్రోక్‌రెక్ట్‌కు కాల్ చేయవచ్చు లేదా స్ట్రోక్‌కు ఫిల్‌రెక్ట్ చేయండి లేదా ఒక నిర్దిష్ట ప్రదేశంలో దీర్ఘచతురస్రాన్ని పూరించవచ్చు.

మీరు RGB రంగు నమూనాను ఉపయోగించి రంగును పేర్కొనవచ్చు (red / gరీన్ / బిlue) లేదా మీరు హెక్స్ విలువలను ఉపయోగించవచ్చు. నేను RGB కలర్ మోడల్‌ను ఉపయోగించాలని నిర్ణయించుకున్నాను ఎందుకంటే హెక్స్ విలువ సరిగ్గా అదే విధంగా పనిచేస్తుందని అర్థం చేసుకోవడం సులభం (కాని మనం వేరే సమయంలో చూడవచ్చు). RGB కోసం మీరు రంగును సృష్టించడానికి ఎంత ఎరుపు, ఆకుపచ్చ మరియు నీలం ఉపయోగించాలో పేర్కొనాలి (అందువల్ల పేర్కొనడానికి మూడు విలువలు). విలువలు 0 నుండి 255 వరకు ఉంటాయి, ఇక్కడ 0 అంటే ఆ రంగులో ఏమీ లేదు మరియు 255 అంటే ఆ రంగు యొక్క ప్రతిదీ. మీరు ఎరుపు, ఆకుపచ్చ మరియు నీలిరంగు కాంతి గురించి ఆలోచించవచ్చు, అవి కొంతవరకు ఆన్ చేయబడతాయి మరియు కలిసి అవి రంగును సృష్టిస్తాయి. దీని అర్థం రంగు (0, 0, 0) నలుపు అయితే (255, 255, 255) తెలుపు.

X- కోఆర్డినేట్, y- కోఆర్డినేట్, వెడల్పు మరియు దీర్ఘచతురస్రం యొక్క ఎత్తు స్ట్రోక్‌రెక్ట్ మరియు ఫిల్‌రెక్ట్ అవసరమయ్యే విలువలు. వీటిని స్ట్రోక్‌రెక్ట్ మరియు ఫిల్‌రెక్ట్ యొక్క వాదనలు అంటారు. ఇవి తప్పనిసరిగా పిక్సెల్‌లు కావు కాని అవి డ్రాయింగ్ సందర్భం యొక్క సమన్వయ వ్యవస్థలో ఉంటాయి. ఎగువ-ఎడమ మూలలో (0, 0) x- అక్షం క్షితిజ సమాంతర అక్షం మరియు y- అక్షం నిలువు అక్షం. ఉదాహరణకు అధిక x- కోఆర్డినేట్ అంటే మీరు మరింత కుడి వైపుకు కదిలినట్లు మరియు అధిక y- కోఆర్డినేట్ అంటే మీరు మరింత క్రిందికి కదిలినట్లు.

మొదటి రెండు పంక్తులలో మేము నీలం రంగులో దీర్ఘచతురస్రాన్ని కొట్టాము మరియు చివరి రెండు పంక్తులలో మేము ఎరుపు రంగులో దీర్ఘచతురస్రాన్ని నింపుతున్నాము. ఇది ఇలా ఉండాలి:

అదేవిధంగా, కింది కోడ్ ఎరుపు, ఆకుపచ్చ, నీలం మరియు పసుపు రంగులలో నాలుగు నిండిన దీర్ఘచతురస్రాలను ఉత్పత్తి చేస్తుంది. మునుపటి కోడ్‌ను తీసివేసి, కింది వాటితో భర్తీ చేయండి:

ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (10, 10, 50, 50); ctx.fillStyle = "rgb (0, 255, 0)"; ctx.fillRect (35, 35, 50, 50); ctx.fillStyle = "rgb (0, 0, 255)"; ctx.fillRect (100, 10, 100, 100); ctx.fillStyle = "rgb (255, 255, 0)"; ctx.fillRect (120, 30, 20, 20);

ఇది ఇలా ఉంటుంది:

ఉదాహరణ 2: HTML5 కాన్వాస్‌పై స్మైలీ ఫేస్ గీయడం

మేము ఇప్పుడు సర్కిల్‌లు మరియు ఆర్క్‌లతో కూడిన కొంచెం క్లిష్టమైన డ్రాయింగ్‌కు వెళ్ళవచ్చు. మేము స్మైలీ ముఖాన్ని గీయబోతున్నాము, ఇది ప్రాథమికంగా సరైన స్థానాల్లోని కొన్ని రంగు వృత్తాలు కంటే ఎక్కువ కాదు. నేను మొదట మీకు కోడ్ ఇవ్వబోతున్నాను మరియు తరువాత ఏమి జరుగుతుందో మరింత వివరంగా వివరిస్తాను. మునుపటి ఉదాహరణ యొక్క డ్రాయింగ్ కోడ్‌ను తీసివేసి, కింది వాటితో భర్తీ చేయండి:

ctx.beginPath (); ctx.arc (150, 150, 100, 0, 2 * Math.PI, తప్పుడు); ctx.closePath (); ctx.fillStyle = "rgb (255, 0, 0)"; ctx.stroke (); ctx.fill (); ctx.beginPath (); ctx.arc (120, 130, 20, 0, 2 * Math.PI, తప్పుడు); ctx.closePath (); ctx.fillStyle = "rgb (255, 255, 255)"; ctx.stroke (); ctx.fill (); ctx.beginPath (); ctx.arc (123, 133, 4, 0, 2 * Math.PI, తప్పుడు); ctx.closePath (); ctx.fillStyle = "rgb (0, 0, 255)"; ctx.stroke (); ctx.fill (); ctx.beginPath (); ctx.arc (180, 130, 20, 0, 2 * Math.PI, తప్పుడు); ctx.closePath (); ctx.fillStyle = "rgb (255, 255, 255)"; ctx.stroke (); ctx.fill (); ctx.beginPath (); ctx.arc (183, 133, 4, 0, 2 * Math.PI, తప్పుడు); ctx.closePath (); ctx.fillStyle = "rgb (0, 0, 255)"; ctx.stroke (); ctx.fill (); ctx.beginPath (); ctx.arc (155, 165, 60, 0, 3, తప్పుడు); ctx.closePath (); ctx.lineWidth = 5; ctx.strokeStyle = "rgb (255, 255, 0)"; ctx.fillStyle = "rgb (255, 255, 255)"; ctx.stroke (); ctx.fill ();

నాకు క్లోజ్‌పాత్ () అవసరమా?

ఇది కొంచెం క్లిష్టంగా ఉంటుంది. మీరు నింపేటప్పుడు లేదా కొట్టేటప్పుడు మీకు ఎల్లప్పుడూ క్లోజ్‌పాత్ () అవసరం లేదు ఎందుకంటే ఈ ఆదేశాలు కూడా మార్గాన్ని మూసివేస్తాయి. సర్కిల్‌ను పొందడానికి మీరు ఈ క్రింది వాటిని చేయవచ్చు:

ctx.beginPath (); ctx.arc (...); ctx.fillStyle = ... ctx.fill ();

స్మైలీ ఫేస్ డ్రాయింగ్ ఎలా పనిచేస్తుంది?

ఆ ప్రారంభ పాత్ మరియు క్లోజ్‌పాత్ ఆదేశాలన్నీ అక్కడ ఏమి చేస్తున్నాయి? మునుపటి ఉదాహరణ యొక్క ఫిల్‌రెక్ట్‌ను నిశితంగా పరిశీలించడం ద్వారా ప్రారంభిద్దాం. ఈ ఆదేశం రెండు పనులు చేస్తుందని గ్రహించడం చాలా ముఖ్యం: ఇది దీర్ఘచతురస్రాన్ని సృష్టిస్తుంది కాని అది ఒక నిర్దిష్ట రంగులో నింపుతుంది. మీరు ఎల్లప్పుడూ కలిసి ఈ పనులు చేయాలనుకోవడం లేదు; మీరు అనుకూల ఆకారాన్ని సృష్టిస్తున్నప్పుడు మీరు మొదట అన్ని డ్రాయింగ్‌లు చేయాలనుకుంటున్నారు, ఆపై స్ట్రోక్ చేయండి లేదా పూరించండి. అదే మేము ఇక్కడ చేయబోతున్నాం. అన్ని డ్రాయింగ్ ఆదేశాలను ఒక మార్గం అని పిలుస్తారు మరియు ఆ తరువాత మేము మార్గాన్ని ఎలా ప్రదర్శించాలో నిర్ణయించబోతున్నాము (దాన్ని కొట్టడం లేదా నింపడం ద్వారా).

మొదటి ఆర్క్ ఎరుపు ముఖాన్ని గీయడానికి ఉపయోగించబడుతుంది, తరువాతి నాలుగు ఆర్క్ ఆదేశాలను నీలిరంగు విద్యార్థులతో తెల్లని కళ్ళను గీయడానికి ఉపయోగిస్తారు మరియు చివరి ఆర్క్ నోటిని గీయడానికి ఉపయోగిస్తారు. మేము ఈ ఆర్క్‌ను ఎలా స్ట్రోక్ చేస్తున్నామో మరియు నింపుతున్నామో గమనించండి: మేము పూర్తి వృత్తాన్ని గీయకపోయినా, దానిని రంగుతో నింపవచ్చు మరియు తద్వారా నోరు సృష్టించవచ్చు.

మీరు ప్రారంభ పాత్‌తో ఒక మార్గాన్ని సృష్టించినప్పుడు, మీ అనుకూల ఆకారాన్ని సృష్టించడానికి మీరు అన్ని రకాల డ్రాయింగ్ ఆదేశాలను చేయవచ్చు. అప్పుడు మీరు క్లోజ్‌పాత్‌తో మార్గాన్ని మూసివేయవచ్చు. మేము అప్పుడు స్ట్రోక్‌స్టైల్ లేదా ఫిల్‌స్టైల్‌ను పేర్కొంటాము మరియు ఆకారాన్ని గీయడానికి మేము కొంత స్ట్రోక్ లేదా ఫిల్ ఆదేశాలను నడుపుతాము. మీరు మొదట శైలులను కూడా పేర్కొనవచ్చు మరియు తరువాత మార్గాన్ని సృష్టించవచ్చు. స్ట్రోక్ మరియు ఫిల్ ఆదేశాలు ఎల్లప్పుడూ చివరిగా ఉండాలి ఎందుకంటే అవి స్ట్రోక్‌స్టైల్ మరియు ఫిల్‌స్టైల్‌తో పాటు మీరు ఇప్పుడే సృష్టించిన మార్గాన్ని ఉపయోగిస్తాయి.

HTML5 కాన్వాస్‌పై ఆర్క్‌లను ఎలా గీయాలి

సర్కిల్‌లు లేదా సర్కిల్‌ల భాగాలను సృష్టించడానికి మేము ఆర్క్ ఆదేశాన్ని ఉపయోగించబోతున్నాము. ఒక ఆర్క్ గీయడానికి మీరు దాని x- కోఆర్డినేట్, దాని y- కోఆర్డినేట్, దాని వ్యాసార్థం, ప్రారంభ కోణం, ముగింపు కోణం మరియు మీరు అపసవ్య దిశలో గీయాలనుకుంటున్నారా లేదా అని పేర్కొనాలి. వ్యాసార్థం ఆర్క్ లేదా వృత్తం ఎంత పెద్దదిగా ఉంటుందో సూచిస్తుంది (ఇది ఒక వృత్తం యొక్క గణిత వ్యాసార్థం). ప్రారంభ మరియు ముగింపు కోణాలు మీరు ఆర్క్ గీయడం ద్వారా ఎక్కడ ప్రారంభించాలనుకుంటున్నారో మరియు మీరు ఆర్క్ గీయడం ఎక్కడ ముగించాలనుకుంటున్నారో సూచిస్తుంది. మీరు పూర్తి వృత్తాన్ని గీయనప్పుడు ఇది ఉపయోగపడుతుంది కాని సగం వృత్తం మాత్రమే. చివరగా, మీరు అపసవ్య దిశలో గీయాలనుకుంటున్నారా లేదా అని మీరు చెప్పాలి (మీకు కావాలంటే నిజం మరియు మీకు ఇది అవసరం లేకపోతే తప్పు).

ఆర్క్ యొక్క ప్రారంభ మరియు ముగింపు కోణాలు రేడియన్లలో పేర్కొనబడ్డాయి, ఇవి గణిత స్థిరాంకం పై నుండి 0 నుండి 2 రెట్లు ఉంటాయి. ప్రారంభ కోణం కోసం విలువ 0 అంటే మీరు తూర్పున (గడియారం యొక్క 3 గంటల స్థానంలో) మరియు 2 * పై ముగింపు కోణం అంటే మీరు పూర్తి వృత్తాన్ని గీయాలనుకుంటున్నారు (మీకు ఒక ఆర్క్ కావాలి రేడియన్లలో 2 * పై కాబట్టి అది పూర్తి వృత్తం).

ఉదాహరణకు, మీకు సగం వృత్తం కావాలంటే మీకు 2 * pi కి బదులుగా 0 యొక్క ప్రారంభ కోణం మరియు pi యొక్క ముగింపు కోణం ఉంటుంది. ఈ సగం వృత్తం వృత్తం యొక్క దిగువ సగం అవుతుంది. మీకు పైభాగం కావాలంటే, మీరు పై యొక్క ప్రారంభ కోణం మరియు 2 * పై ముగింపు కోణం కలిగి ఉండాలి.

ఉదాహరణగా, 50 (వ్యాసార్థం) (100, 100) వద్ద ఉన్న వృత్తం, తూర్పు (0) నుండి గీయడం ప్రారంభించి, పూర్తి వృత్తం (2 * పై) సవ్యదిశలో గీయడం (అపసవ్య దిశలో తప్పుడు) ctx అవుతుంది. arc (100, 100, 50, 0, Math.PI * 2, తప్పుడు); మీరు పూర్తి వృత్తాన్ని గీయడానికి ఇష్టపడనప్పుడు వాటి విలువలు ఎలా ఉండాలో తెలుసుకోవటానికి ప్రారంభ మరియు ముగింపు కోణాలతో ఆడటానికి ప్రయత్నించండి.

చివరి ఆర్క్ కోసం నేను పై (3.14 ...) కు బదులుగా 3 విలువను ఉపయోగిస్తానని గమనించండి, కనుక ఇది సగం సర్కిల్ కంటే కొంచెం తక్కువ. ఇది స్మైలీ ముఖం యొక్క నోటికి మంచి స్పర్శను సృష్టిస్తుంది. నేను లైన్ వెడల్పును కూడా పేర్కొంటున్నానని గమనించండి, ఇది నోటి చుట్టూ ఉన్న రేఖ యొక్క వెడల్పును స్పష్టంగా మారుస్తుంది. లైన్‌విడ్త్ కోసం ఈ విలువ స్ట్రోకింగ్ చేసేటప్పుడు ఉపయోగించబడుతుంది.

కోఆర్డినేట్‌లు మరియు కోణాల కోసం అన్ని విలువలతో నేను ఎలా వచ్చాను? నేను కోరుకున్నది వచ్చేవరకు నేను కొద్దిసేపు ఆడాను. మీరు కోఆర్డినేట్-సిస్టమ్ మరియు కోణాల గురించి తెలిసినప్పుడు, కళ్ళను కదిలించడానికి లేదా నోరు పెద్దదిగా చేయడానికి మీరు ఏమి మార్పులు చేయాలో మీకు తెలుసు.

మరిన్ని HTML5 ట్యుటోరియల్స్

• HTML5 ట్యుటోరియల్: డ్రాయింగ్ సర్కిల్స్ మరియు ఆర్క్స్
  HTML5 లో సర్కిల్‌లు మరియు ఆర్క్‌లను గీయడం చాలా సవాలుగా ఉంటుంది. ఈ ట్యుటోరియల్‌లో నేను వృత్తాలు మరియు వంపులను ఎలా గీయాలి మరియు వంపుల కోణాలను ఎలా కొలుస్తానో వివరించాను. ఈ ట్యుటోరియల్ చాలా ఉదాహరణలు కలిగి ఉంది.
• HTML5 ట్యుటోరియల్: ఫ్యాన్సీ రంగులు మరియు ప్రభావాలతో టెక్స్ట్ డ్రాయింగ్
  మీరు HTML5 లో వచనాన్ని గీయడం కంటే చాలా ఎక్కువ చేయవచ్చు! ఈ ట్యుటోరియల్‌లో నీడలు, ప్రవణతలు మరియు భ్రమణంతో సహా కొన్ని ఫాన్సీ పాఠాలను రూపొందించడానికి నేను వివిధ ప్రభావాలను చూపుతాను.

ఈ వ్యాసం రచయిత యొక్క ఉత్తమమైన జ్ఞానానికి ఖచ్చితమైనది మరియు నిజం. కంటెంట్ సమాచార లేదా వినోద ప్రయోజనాల కోసం మాత్రమే మరియు వ్యాపారం, ఆర్థిక, చట్టపరమైన లేదా సాంకేతిక విషయాలలో వ్యక్తిగత సలహా లేదా వృత్తిపరమైన సలహాలకు ప్రత్యామ్నాయం కాదు.