Canvas element
கேன்வாஸ் உறுப்பு எச். டி. எம். எல் 5 இன் ஒரு பகுதியாகும் மற்றும் 2 டி வடிவங்கள் மற்றும் பிட்மேப் படங்களின் மாறும், ஸ்கிரிப்டபிள் ரெண்டரிங்கை அனுமதிக்கிறது. இது ஒரு பிட்மேப்பைப் புதுப்பிக்கும் குறைந்த அளவிலான, நடைமுறை மாதிரியாகும். எச். டி. எம். எல்5 கேன்வாஸ் 2டி கேம்களை உருவாக்கவும் உதவுகிறது. எச். டி. எம். எல்5 கேன்வாஸ் அதன் சொந்த 2டி வரைதல் ஏபிஐ-ஐ வழங்குகையில், ஓபன்ஜிஎல் இஎஸ் உடன் 3டி ரெண்டரிங்கை அனுமதிக்க வெப்ஜிஎல் ஏபிஐ-ஐ ஆதரிக்கிறது. வரலாற்று கேன்வாஸ் ஆரம்பத்தில் ஆப்பிள் நிறுவனத்தால் 2004 ஆம் ஆண்டில் தங்கள் சொந்த மேக் ஓஎஸ் எக்ஸ் வெப்கிட் கூறுகளில் பயன்படுத்த அறிமுகப்படுத்தப்பட்டது, இது டாஷ்போர்டு விட்ஜெட்டுகள் மற்றும் சஃபாரி உலாவி போன்ற பயன்பாடுகளுக்கு சக்தி அளிக்கிறது. பின்னர், 2005 ஆம் ஆண்டில், இது 2006 ஆம் ஆண்டில் கெக்கோ உலாவிகள் மற்றும் ஓபரா பதிப்பு 1.8 இல் ஏற்றுக்கொள்ளப்பட்டது, மேலும் அடுத்த தலைமுறை வலை தொழில்நுட்பங்களுக்கான புதிய முன்மொழியப்பட்ட விவரக்குறிப்புகள் குறித்து வெப் ஹைபர்டெக்ஸ்ட் அப்ளிகேஷன் டெக்னாலஜி வொர்கிங் குரூப் (டபிள்யூ. எச். ஏ. டி. டபிள்யூ. ஜி) ஆல் தரப்படுத்தப்பட்டது. பயன்பாடு ஒரு கேன்வாஸ் என்பது உயரம் மற்றும் அகல பண்புகளுடன் எச். டி. எம். எல் குறியீட்டில் வரையறுக்கப்பட்ட ஒரு வரையக்கூடிய பகுதியைக் கொண்டுள்ளது. ஜாவாஸ்கிரிப்ட் குறியீடு மற்ற பொதுவான 2டி ஏபிஐகளைப் போன்ற முழு வரைதல் செயல்பாடுகளின் மூலம் பகுதியை அணுகலாம், இதனால் மாறும் வகையில் உருவாக்கப்பட்ட கிராபிக்ஸ் அனுமதிக்கிறது. கேன்வாஸின் சில எதிர்பார்க்கப்பட்ட பயன்பாடுகளில் கட்டிட வரைபடங்கள், அனிமேஷன்கள், விளையாட்டுகள் மற்றும் பட அமைப்பு ஆகியவை அடங்கும். கேன்வாஸுடன் தொடர்புகொள்வது கேன்வாஸின் ரெண்டரிங் சூழலைப் பெறுவதை உள்ளடக்கியது, இது கேன்வாஸ் ஏபிஐ, வெப்ஜிஎல் அல்லது வெப்ஜிஎல் 2 ரெண்டரிங் சூழலைப் பயன்படுத்தலாமா என்பதை தீர்மானிக்கிறது. எடுத்துக்காட்டு பின்வரும் குறியீடு ஒரு எச். டி. எம். எல் பக்கத்தில் கேன்வாஸ் உறுப்பை உருவாக்குகிறதுஃ <கேன்வாஸ் ஐடி = "எடுத்துக்காட்டு" அகலம் = "200" உயரம் = "200"> உங்கள் உலாவி எச். டி. எம். எல் 5 கேன்வாஸை ஆதரிக்கவில்லை என்றால் இந்த உரை காட்டப்படும். ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி, நீங்கள் கேன்வாஸில் வரையலாம்ஃ வர் எடுத்துக்காட்டு = document.getElementById ('எடுத்துக்காட்டு'); வர் சூழல் = example.getContext ('2d'); context.fillStyle = 'சிவப்பு'; context.fillRect (30,30,50,50); இந்த குறியீடு திரையில் ஒரு சிவப்பு செவ்வகத்தை ஈர்க்கிறது. கேன்வாஸ் ஏபிஐ அனைத்து கேன்வாஸ் சூழலின் பண்புகளையும் சேமிக்கவும் மீட்டெடுக்கவும் () மற்றும் மீட்டமைக்கவும் () வழங்குகிறது. கேன்வாஸ் உறுப்பு அளவு மற்றும் வரைதல் மேற்பரப்பு அளவு ஒரு கேன்வாஸ் உண்மையில் இரண்டு அளவுகளைக் கொண்டுள்ளதுஃ உறுப்பின் அளவு மற்றும் உறுப்பின் வரைதல் மேற்பரப்பின் அளவு. உறுப்பின் அகலம் மற்றும் உயர பண்புக்கூறுகளை அமைப்பது இந்த இரண்டு அளவுகளையும் அமைக்கிறது; சிஎஸ்எஸ் பண்புக்கூறுகள் உறுப்பின் அளவை மட்டுமே பாதிக்கின்றன, வரைபட மேற்பரப்பை அல்ல. முன்னிருப்பாக, கேன்வாஸ் உறுப்பின் அளவு மற்றும் அதன் வரைபட மேற்பரப்பின் அளவு இரண்டும் 300 திரை பிக்சல்கள் அகலமும் 150 திரை பிக்சல்கள் உயரமும் கொண்டவை. எடுத்துக்காட்டில் காட்டப்பட்டுள்ள பட்டியலில், கேன்வாஸ் உறுப்பின் அளவை அமைக்க CSS ஐப் பயன்படுத்தும், உறுப்பின் அளவு 600 பிக்சல்கள் அகலமும் 300 பிக்சல்கள் உயரமும் கொண்டது, ஆனால் வரைபட மேற்பரப்பின் அளவு 300 பிக்சல்கள் × 150 பிக்சல்களின் இயல்புநிலை மதிப்பில் மாறாமல் உள்ளது. ஒரு கேன்வாஸ் உறுப்பின் அளவு அதன் வரைபட மேற்பரப்பின் அளவுடன் பொருந்தாதபோது, உலாவி வரைபட மேற்பரப்பை உறுப்புக்கு ஏற்றவாறு அளவிடுகிறது (இது ஆச்சரியமான மற்றும் தேவையற்ற விளைவுகளுக்கு வழிவகுக்கும்). எடுத்துக்காட்டு அமைத்தல் உறுப்பு அளவு மற்றும் வெவ்வேறு மதிப்புகளுக்கு மேற்பரப்பு அளவை வரைதல்ஃ <! DOCTYPE எச். டி. எம். எல்> <எச். டி. எம். எல்> <தலை> <தலை> கேன்வாஸ் உறுப்பு அளவுஃ 600 x 300, கேன்வாஸ் வரைதல் மேற்பரப்பு அளவுஃ 300 x 150 </தலைப்பு> <பாணி> உடல் {பின்னணிஃ #dddddd #canvas {விளிம்புஃ 20பிஎக்ஸ்; திணிப்புஃ 20பிஎக்ஸ்; பின்னணிஃ #ffffff; எல்லைஃ மெல்லிய இன்செட் #aaaaaa; அகலம்ஃ 600பிஎக்ஸ்; உயரம்ஃ 300பிஎக்ஸ்;} </பாணி> </தலை> <உடல்> <கேன்வாஸ் ஐடி = "கேன்வாஸ்"> கேன்வாஸ் ஆதரிக்கப்படவில்லை </கேன்வாஸ்> </உடல்> </எச். டி. எம். எல்> ராஸ்டர் அடிப்படையிலான கேன்வாஸ் போலல்லாமல், எஸ். வி. ஜி திசையன் அடிப்படையிலானது, இதனால் ஒவ்வொரு வரையப்பட்ட வடிவமும் ஒரு காட்சி வரைபடம் அல்லது ஆவண பொருள் மாதிரியில் ஒரு பொருளாக நினைவுகூரப்படுகிறது, இது பின்னர் ஒரு பிட்மேப்பிற்கு வழங்கப்படுகிறது. இதன் பொருள் என்னவென்றால், ஒரு எஸ். வி. ஜி பொருளின் பண்புக்கூறுகள் மாற்றப்பட்டால், உலாவி தானாகவே காட்சியை மீண்டும் வழங்க முடியும். மறுபுறம், கேன்வாஸ் பொருள்கள் உடனடி முறையில் வரையப்படுகின்றன. மேலே உள்ள கேன்வாஸ் எடுத்துக்காட்டில், செவ்வக வரைவு செயல்பாடு கேன்வாஸை மாற்றியமைக்கிறது, மேலும் செவ்வகமாக அதன் பிரதிநிதித்துவம் அமைப்பால் மறக்கப்படுகிறது. செவ்வகத்தின் நிலையை மாற்ற வேண்டுமானால், செவ்வகத்தால் மூடப்பட்டிருக்கக்கூடிய எந்தவொரு பொருளும் உட்பட கேன்வாஸ் மீண்டும் வரையப்பட வேண்டும். சமமான எஸ். வி. ஜி வழக்கில், செவ்வகத்தின் நிலை பண்புகளை ஒருவர் வெறுமனே மாற்றலாம், மேலும் அதை எவ்வாறு மீண்டும் வண்ணம் பூசுவது என்பதை உலாவி தீர்மானிக்கும். கேன்வாஸ் உறுப்புக்குள் எஸ். வி. ஜி போன்ற காட்சி திறன்களைக் கொண்டிருக்க கேன்வாஸ் மாதிரியை சுருக்கக்கூடிய கூடுதல் ஜாவாஸ்கிரிப்ட் நூலகங்கள் உள்ளன. பல கேன்வாஸ் அடுக்குகளையும் பயன்படுத்தலாம், அதாவது மாற்றங்கள் தேவைப்படும்போது குறிப்பிட்ட அடுக்குகளை மட்டுமே மீண்டும் உருவாக்க வேண்டும். எஸ். வி. ஜி படங்கள் எக்ஸ்எம்எல் இல் குறிப்பிடப்படுகின்றன, மேலும் சிக்கலான காட்சிகளை எக்ஸ்எம்எல் எடிட்டிங் கருவிகள் மூலம் உருவாக்கி பராமரிக்க முடியும். SVG காட்சி வரைபடம் நிகழ்வு கையாளிகளை பொருட்களுடன் தொடர்புபடுத்த உதவுகிறது, எனவே ஒரு செவ்வகம் ஒரு கிளிக் நிகழ்வுக்கு பதிலளிக்கலாம். கேன்வாஸுடன் அதே செயல்பாட்டைப் பெற, சுட்டி கிளிக்கின் ஆயத்தொகுதிகளை வரையப்பட்ட செவ்வகத்தின் ஆயத்தொகுதிகளுடன் கைமுறையாக பொருத்த வேண்டும், அது கிளிக் செய்யப்பட்டதா என்பதை தீர்மானிக்க. கருத்தியல் ரீதியாக, கேன்வாஸ் என்பது ஒரு கீழ்-நிலை ஏபிஐ ஆகும், இதன் மீது உயர்-நிலை இடைமுகங்கள் உருவாக்கப்படலாம் (எடுத்துக்காட்டாக, எஸ். வி. ஜி ஆதரவு). ஜாவாஸ்கிரிப்ட் நூலகங்கள் உள்ளன, அவை ஆண்ட்ராய்டு 2. x இல் உள்ள உலாவிகள் போன்ற SVG ஐ வழங்காத ஆனால் கேன்வாஸை ஆதரிக்கும் உலாவிகளுக்கு கேன்வாஸைப் பயன்படுத்தி பகுதி SVG செயல்படுத்தல்களை வழங்குகின்றன. இருப்பினும், இது பொதுவாக அப்படி இல்லை-அவை சுயாதீனமான தரநிலைகள். கேன்வாஸுக்கு காட்சி வரைபட நூலகங்கள் இருப்பதால் நிலைமை சிக்கலானது, மேலும் எஸ். வி. ஜி சில பிட்மேப் கையாளுதல் செயல்பாட்டைக் கொண்டுள்ளது. எதிர்வினைகள் அதன் அறிமுகத்தின் போது, கேன்வாஸ் உறுப்பு வலை தரநிலைகள் சமூகத்திலிருந்து கலவையான எதிர்வினைகளை சந்தித்தது. எஸ். வி. ஜி தரநிலையை ஆதரிப்பதற்குப் பதிலாக ஒரு புதிய தனியுரிம உறுப்பை உருவாக்க ஆப்பிள் எடுத்த முடிவுக்கு எதிராக வாதங்கள் உள்ளன. பெயர்வெட்டு இல்லாதது போன்ற தொடரியல் பற்றிய பிற கவலைகள் உள்ளன. கேன்வாஸ் மீது அறிவுசார் சொத்துரிமை மார்ச் 14,2007 அன்று, வெப்கிட் டெவலப்பர் டேவ் ஹயாத் ஆப்பிளின் மூத்த காப்புரிமை ஆலோசகர் ஹெலன் பிளாட்கா வொர்க்மேனிடமிருந்து ஒரு மின்னஞ்சலை அனுப்பினார், அதில் ஆப்பிள் அனைத்து அறிவுசார் சொத்துரிமைகளையும் வைத்திருப்பதாகக் கூறியது வாட்ஜியின் வலை பயன்பாடுகள் 1 வேலை வரைவு, மார்ச் 24,2005 தேதியிட்டது, பிரிவு 10.1, "கிராபிக்ஸ்ஃ பிட்மேப் கேன்வாஸ்" என்ற தலைப்பில், ஆனால் காப்புரிமைகளை உரிமம் பெறுவதற்கான கதவைத் திறந்து வைத்தது, விவரக்குறிப்பு முறையான காப்புரிமைக் கொள்கையுடன் ஒரு தரமான அமைப்புக்கு மாற்றப்பட வேண்டும். இது வலை உருவாக்குநர்களிடையே கணிசமான விவாதத்தை ஏற்படுத்தியது மற்றும் உலகளாவிய வலை கூட்டமைப்பு (டபிள்யூ 3 சி) ராயல்டி இல்லாத உரிமங்களை வெளிப்படையாக ஆதரிப்பதோடு ஒப்பிடுகையில் காப்புரிமைகள் குறித்த வாட் டபிள்யூஜியின் கொள்கை இல்லாதது குறித்து கேள்விகளை எழுப்பியது. ஆப்பிள் பின்னர் W3C இன் ராயல்டி இல்லாத காப்புரிமை உரிம விதிமுறைகளின் கீழ் காப்புரிமைகளை வெளிப்படுத்தியது. கேன்வாஸ் உறுப்பு எச். டி. எம். எல் பணிக்குழுவால் உருவாக்கப்பட்ட எதிர்கால டபிள்யூ 3 சி பரிந்துரையின் ஒரு பகுதியாக மாறும் போதெல்லாம் ஆப்பிள் காப்புரிமைக்கு ராயல்டி இல்லாத உரிமத்தை வழங்க வேண்டும் என்பது வெளிப்பாட்டின் பொருள். தனியுரிமை கவலைகள் கேன்வாஸ் கைரேகை என்பது ஆன்லைன் பயனர்களைக் கண்காணிப்பதற்கான பல உலாவி கைரேகை நுட்பங்களில் ஒன்றாகும், இது வலைத்தளங்களை எச். டி. எம். எல் 5 கேன்வாஸ் உறுப்பைப் பயன்படுத்தி பார்வையாளர்களைக் கண்டறிந்து கண்காணிக்க அனுமதிக்கிறது. பிரின்ஸ்டன் பல்கலைக்கழகம் மற்றும் கே. யூ. லுவென் பல்கலைக்கழக ஆராய்ச்சியாளர்கள் தங்கள் கட்டுரையில் தி வெப் நெவர் மறவாது என்று விவரித்த பின்னர், இந்த நுட்பம் 2014 ஆம் ஆண்டில் பரந்த ஊடக செய்திகளைப் பெற்றது. கேன்வாஸ் கைரேகை தொடர்பான தனியுரிமை கவலைகள் குக்கீகளை நீக்குவது மற்றும் தற்காலிக சேமிப்பை அகற்றுவது கூட பயனர்கள் ஆன்லைன் கண்காணிப்பைத் தவிர்ப்பதற்கு போதுமானதாக இருக்காது என்ற உண்மையை மையமாகக் கொண்டுள்ளன. உலாவி ஆதரவு இந்த உறுப்பு மொசில்லா பயர்பாக்ஸ், கூகிள் குரோம், இன்டர்நெட் எக்ஸ்ப்ளோரர், சஃபாரி, கான்கொரர், ஓபரா மற்றும் மைக்ரோசாப்ட் எட்ஜ் ஆகியவற்றின் தற்போதைய பதிப்புகளால் ஆதரிக்கப்படுகிறது. தானிய எதிர்ப்பு வடிவியல் (ஏஜிஜி) கெய்ரோ (கிராபிக்ஸ்) டிஸ்ப்ளே போஸ்ட்ஸ்கிரிப்ட் கிராபிக்ஸ் சாதன இடைமுகம் (ஜிடிஐ +) குவார்ட்ஸ் 2டி வெப்ஜிஎல் குறிப்புகள் வெளிப்புற இணைப்புகள் கேன்வாஸ் விளக்கம் வாட்ஜி வலை பயன்பாடுகள் வரைவு விவரக்குறிப்புகள் கேன்வாஸ் குறிப்பு பக்கம் ஆப்பிள் டெவலப்பர்கள் இணைப்பு அடிப்படை கேன்வாஸ் பயிற்சி ஓபரா டெவலப்பர் சமூக கேன்வாஸ் பயிற்சி மற்றும் மொஸில்லா டெவலப்பர் மையத்தின் அறிமுகப் பக்கம் எச். டி. எம். எல் குறிச்சொற்கள் எச். டி. எம். எல் 5