HTML5 նկարչության ձեռնարկ ՝ կտավ նկարչության հիմունքներ

Բովանդակություն

• Վեբ ստանդարտների կարևորությունը
• HTML5 հիմնական կայքի ստեղծում
• HTML5 կտավի տարրի ավելացում
• Օգտագործելով JavaScript ՝ HTML5 կտավ նկարելու համար
• Օրինակ 1. HTML5 կտավի վրա նկարելով որոշ ուղղանկյուններ
• Օրինակ 2. 5պտացող դեմքի նկարում HTML5 կտավի վրա
• Ինձ պե՞տք է closePath ():
• Ինչպե՞ս է գործում ժպիտով դեմքը նկարելը:
• Ինչպես նկարել աղեղներ HTML5 կտավի վրա
• HTML5- ի լրացուցիչ ձեռնարկներ

Սիմեոն Վիսերը գրող է, ով սիրում է լուսաբանել թեմաներ, ինչպիսիք են տեխնոլոգիան և ճանապարհորդությունը:

Այս ձեռնարկում ես ցույց կտամ, թե ինչպես օգտագործել կտավի տարրը HTML5- ում ՝ ձեր կայքի համար հիանալի գրաֆիկա ստեղծելու համար: HTML5 վեբ ստանդարտը մի շարք նոր առանձնահատկություններ է ավելացնում HTML- ին, որը բոլոր վեբ էջերի լեզուն է: Այս նոր առանձնահատկություններից մեկը կտավի տարրն է: Կտավը թույլ է տալիս նկարել ՝ օգտագործելով JavaScript կոդ, այնպես որ կարող եք շատ ստեղծագործ լինել ցուցադրվողի նկատմամբ: Ես կքննարկեմ HTML5 կտավի նկարչության երկու օրինակ, որոնք օգտագործում են նկարչության որոշ հիմնական հատկություններ:

Այս ձեռնարկը ուղղված է այն մարդկանց, ովքեր կարող են մի փոքր իմանալ HTML- ի աշխատանքի մասին, բայց որոնք ծանոթ չեն կտավի տարրին: Դուք կարող եք պարզապես սկսել ցանցի մշակումը կամ պարզապես ցանկանաք ավելին իմանալ HTML5- ի կտավի տարրի մասին: Այս ձեռնարկը կանցնի բոլոր քայլերով ՝ առանց ենթադրյալ շատ գիտելիքներ ստանձնելու: Ես խորհուրդ եմ տալիս մի փոքր կարդալ HTML- ի մասին, որպեսզի իմանաք, թե ինչ է տարրը և, ընդհանուր առմամբ, HTML նշումն ինչ տեսք ունի: Եթե ​​ինչ-որ բան անհասկանալի է, թողեք մեկնաբանություն ստորև:

Վեբ ստանդարտների կարևորությունը

Այսքան շատ համակարգիչներ և վեբ զննարկիչներ, որոնք ինտերնետ են մուտք գործում, շատ կարևոր է համապատասխանել գոյություն ունեցող բոլոր վեբ ստանդարտներին: Եթե ​​HTML5 լեզվով կայք եք գրում, ապա իսկապես ցանկանում եք համոզվել, որ այն վավեր է ՝ համաձայն HTML5 վեբ ստանդարտի: Կարող եք օգտագործել W3C վալիդատոր ՝ համոզվելու համար, որ ձեր կայքը իսկապես HTML5 կայք է: Ահա թե ինչու մենք կսկսենք HTML5 վավեր հիմնական դատարկ կայքէջից, այնուհետև ես կավելացնեմ կտավը նկարելու համար անհրաժեշտ բոլոր իրերը:

HTML5 հիմնական կայքի ստեղծում

Առաջին քայլը պետք է ստեղծել հիմնական .html ֆայլ, որի մեջ կա HTML5 կոդ: Սա մեր դատարկ HTML5 էջն է: Այս ձեռնարկի հաջորդ քայլերում մենք կավելացնենք կտավը և JavaScript կոդը `ինչ-որ բան նկարելու համար:

Ահա այն, ինչ դուք պետք է անեք.

• Բացեք տեքստի խմբագիր:
• Պատճենեք ներքևի կոդը և դրեք այն նոր ֆայլում
• Պահեք ֆայլը որպես հիմնական տեքստային ֆայլ և տվեք այն անուն, որն ավարտվում է .html (համոզվեք, որ դա ինչ-որ անունի նման է. Html և ոչ name.html.txt: Եթե դա այդպես է, ապա անհրաժեշտ է վերանվանել այն և նորից բացել ձեր տեքստի խմբագիրը):

Եթե ​​Windows եք օգտագործում, ապա պետք է օգտագործեք կամ NotePad կամ WordPad, բայց ոչ Microsoft Word: Սրա պատճառն այն է, որ դուք ցանկանում եք պահպանել ձեր աշխատանքը որպես հիմնական տեքստային ֆայլ, այլ ոչ թե հավելյալ տեղեկատվությամբ: Եթե ​​օգտագործում եք GNU / Linux կամ Mac OS X, պարզապես օգտագործեք ձեր նախընտրած տեքստի խմբագրիչը, որը թույլ է տալիս հեշտությամբ ստեղծել և պահպանել հիմնական տեքստային ֆայլեր: Նույնիսկ ավելի լավ է օգտագործել այն ծրագրավորողների տեքստային խմբագրիչներից մեկը, որոնք ունեն հավելյալ հատկություններ ծրագրավորողների և վեբ մշակողների համար: Բայց մի անհանգստացեք. Դրանցից մեկը միշտ կարող եք ներբեռնել ավելի ուշ, երբ ավելի շատ զբաղվեք վեբ մշակմամբ և համակարգչային ծրագրավորմամբ:

Ահա HTML5 դատարկ կայք.

! DOCTYPE html> html> head> meta http-eku = "Content-type" content = "text / html; charset = UTF-8"> վերնագիր> HTML5 ձեռնարկ ՝ կտավ նկարչության հիմունքներ / վերնագիր> / գլուխ> մարմին> / մարմին> / html>

Բացեք այս ֆայլը ձեր վեբ զննարկչում: Դուք պետք է տեսնեք դատարկ էջ, իսկ կայքի վերնագիրն է ՝ «HTML5 ձեռնարկ ՝ կտավների նկարչության հիմունքներ»: Եթե ​​դա տեսնեք, ապա հաջողությամբ ստեղծել եք HTML5 կայք:

HTML կամ համակարգչային կոդ գրելիս կարևոր է պարբերաբար ստուգել ՝ արդյոք դա ճիշտ եք անում: Դուք գրում եք մի քանի բիթ կոդ և այնուհետև ստուգում եք, թե արդյոք կայքէջը նայում է այնպես, ինչպես ցանկանում եք: Եթե ​​այդպես է, կարող եք անցնել հաջորդ բանի, իսկ եթե ոչ, ապա կարող եք անմիջապես շտկել այն:

Յուրաքանչյուր HTML կայքէջ բաղկացած է html տարրից, և դրանում կա գլխի տարր և մարմնի տարր: Գլխում կարող եք գտնել ամեն տեսակի տեղեկատվություն, որը ինքնին էջի մաս չէ, բայց դեռ անհրաժեշտ է, օրինակ ՝ վերնագիր կամ այլ ֆայլերի հղումներ (օրինակ ՝ CSS և JavaScript ֆայլեր): Առայժմ մենք օգտագործում ենք միայն վերնագրի տարրը: Ինչպես տեսնում եք, մարմնի տարրը դատարկ է, և այդ պատճառով էլ կայքում ոչինչ չկա: Այժմ մենք ավելացնելու ենք կտավի այն տարրը, որը թույլ է տալիս նկարել ինտերնետային կայքի այդ հատվածը:

HTML5 կտավի տարրի ավելացում

Կարող եք կտավի տարր ավելացնել ՝ հետևյալը ավելացնելով վերոնշյալ HTML5 ինտերնետային կայքի մարմնի տարրին.

կտավի id = "mycanvas" width = "300" height = "300"> / կտավ>

Ինչ է սա նշանակում? Դա նշանակում է, որ դուք սահմանում եք կտավի տարր ՝ id, լայնություն և բարձրություն հատկանիշներով: Սրանք բոլորը պահանջվում են այս ձեռնարկի համար: Դուք պետք է նշեք կտավի լայնությունը և բարձրությունը պիքսելների քանակով, որպեսզի վեբ զննարկիչը իմանա, թե որքան մեծ է կտավը: Եթե ​​դուք չեք նշում կտավի չափերը, ապա լռելյայն լայնությունը 300 պիքսել է, իսկ լռելյայն բարձրությունը ՝ 150 պիքսել: Մեր ձեռնարկում մեզ ավելի մեծ կտավ է պետք, այնպես որ մենք օգտագործում ենք 300 լայնություն և 300 բարձրություն:

ID- ն պահանջվում է որպես նույնացուցիչ, այնպես որ մենք կարող ենք վկայակոչել կտավը մեր JavaScript կոդում: Այս ID- ն պետք է եզակի լինի ձեր կայքում ՝ Դուք չեք կարող ունենալ նույն ID- ով այլ տարր:

Ձեր HTML5 ինտերնետային էջն այժմ պետք է ունենա այսպիսի տեսք.

! DOCTYPE html> html> head> meta http-eku = "Content-type" content = "text / html; charset = UTF-8"> վերնագիր> HTML5 ձեռնարկ ՝ կտավ նկարչության հիմունքներ / վերնագիր> / գլուխ> մարմին> կտավ id = "mycanvas" width = "300" height = "300"> / կտավ> / մարմին> / html>

Եթե ​​ձեր զննարկչում այժմ դիտում եք վեբ էջը, ապա դուք ոչ մի տարբերություն չեք տեսնի `համեմատած նախկինում վեբ կայքի տեսքի հետ: Այն դեռ սպիտակ դատարկ կայք է: Դա այն պատճառով է, որ կտավի վրա դեռ ոչ մի բան չենք նկարել. Կտավն այնտեղ է, բայց ֆոնի գույնը լռելյայնորեն սպիտակ է, այնպես որ այն դեռ չես կարող տեսնել:

Timeամանակն է նկարել կտավը:

Օգտագործելով JavaScript ՝ HTML5 կտավ նկարելու համար

HTML5 կտավի վրա նկարելու համար հարկավոր է գրել JavaScript կոդ, որում ասվում է, թե ինչ է պետք նկարել: JavaScript- ը սցենարների հայտնի լեզու է համացանցի համար և այն օգտագործվել է շատ բաների համար, ինչպիսիք են ինտերակտիվ կայքերը և վեբ հավելվածները:

Ահա այն, ինչ մենք պետք է անենք. Մենք պետք է միջոց գտնենք կտավի տարրին հղում կատարելու համար, և ապա պետք է գրել որոշ հրամաններ կտավի վրա նկարելու համար: Մենք դա անում ենք կտավի այսպես կոչված նկարչական ենթատեքստ ձեռք բերելով: Մենք կարող ենք օգտագործել համատեքստը որոշ հրամաններ գործադրելու համար, որոնք հստակեցնում են, թե ինչ է պետք նկարել:

Նայեք հետևյալին և համոզվեք, որ ձեր վեբ էջն էլ ունի այսպիսի տեսք.

! DOCTYPE html> html> head> meta http-eku = "Content-type" content = "text / html; charset = UTF-8"> վերնագիր> HTML5 ձեռնարկ ՝ կտավ նկարչության հիմունքներ / վերնագիր> / գլուխ> մարմին> կտավ id = "mycanvas" width = "300" height = "300"> / կտավ> սցենարի տեսակը = "text / javascript"> var canvas = document.getElementById ('mycanvas'); var ctx = canvas.getContext ('2d'); / սցենար> / մարմին> / html>

Մենք ավելացրել ենք մի քանի JavaScript ՝ երկու տող կոդով: Առաջին տողը ստեղծում է կտավ կոչվող փոփոխական, որը պարունակում է կտավի տարր: Եթե ​​այլ ID եք օգտագործել, ապա պետք է նաև փոխեք այս տողը: GetElementById ֆունկցիան ձեզ տալիս է այդ id- ով HTML փաստաթղթում առկա տարրը, ուստի կարևոր է, որ տարրը փնտրեք կտավի id- ով: Երկրորդ տողը մեզ տալիս է փոփոխական ctx ՝ կտավի տարրի նկարչական համատեքստով: Այս դեպքում դա 2D նկարչության համատեքստ է, քանի որ մենք պատրաստվում ենք անել երկչափ գծագրեր:

Օրինակ 1. HTML5 կտավի վրա նկարելով որոշ ուղղանկյուններ

Եկեք սկսենք մի պարզ բանից `ընդամենը մի քանի ուղղանկյուններից: Ձեր կայքի JavaScript կոդին ավելացրեք հետևյալ կոդը.

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

Վերոնշյալ կոդը հասկանալու համար մենք պետք է իմանանք տարբերությունը շոյելուց և լրացնելուց: Երբ հարվածում եք, դուք պարզապես նկարում եք ուղղանկյան ուրվագիծը, իսկ լրացնելիս `գունավորում եք նաև ուղղանկյան ներսը: Գույնը, որով դուք ինսուլտ եք անում կամ լրացնում եք, փոխելու համար դուք պետք է փոխեք strokeStyle- ը կամ fillStyle- ը: Դրանից հետո դուք կարող եք զանգահարել strokeRect կամ fillRect ՝ ինսուլտի կամ լրացնել ուղղանկյունը որոշակի վայրում:

Դուք կարող եք գույն ընտրել ՝ օգտագործելով RGB գույնի մոդելը (ռed / էreen / բlue) կամ կարող եք օգտագործել վեցանկյուն արժեքներ: Ես որոշել եմ օգտագործել RGB գունային մոդելը, քանի որ ավելի հեշտ է հասկանալ, չնայած վեցանկյուն արժեքը գործում է միանգամայն նույնը (բայց դրան կարող ենք նայել այլ ժամանակ): RGB- ի համար անհրաժեշտ է նշել, թե որքան կարմիր, կանաչ և կապույտ գույն պետք է օգտագործվի գույնը ստեղծելու համար (այստեղ նշվում է երեք արժեք): Արժեքները 0-ից 255 են, որտեղ 0-ն այդ գույնի ոչինչ չի նշանակում, իսկ 255-ը նշանակում է այդ գույնի ամեն ինչ: Կարելի է մտածել կարմիր, կանաչ և կապույտ լույսերի մասին, որոնք ինչ-որ չափով միացված են և միասին ստեղծում են գույնը: Սա նշանակում է, որ գույնը (0, 0, 0) սև է, մինչդեռ (255, 255, 255) սպիտակ է:

Ուղղանկյունի և լրացնելու համար անհրաժեշտության արժեքներն են x- կոորդինատը, y- կոորդինատը, ուղղանկյունի լայնությունը և բարձրությունը: Դրանք կոչվում են strokeRect և fillRect փաստարկներ: Սրանք պարտադիր չէ, որ պիքսել լինեն, բայց նկարչական համատեքստի կոորդինատային համակարգում են: Վերին ձախ անկյունը (0, 0) է, x- առանցքը հորիզոնական է, իսկ y- առանցքը `ուղղահայաց: Օրինակ `ավելի բարձր x- կոորդինատը նշանակում է, որ դուք ավելի շատ եք տեղափոխվել աջ, իսկ ավելի բարձր y- կոորդինատը` նշանակում է, որ ավելի շատ եք շարժվել դեպի ներքև:

Առաջին երկու տողերում մենք շոյում ենք կապույտ գույնի ուղղանկյուն, իսկ վերջին երկու տողերում կարմիր գույնի ուղղանկյուն ենք լցնում: Այն պետք է ունենա այսպիսի տեսք.

Օրինակ 2. 5պտացող դեմքի նկարում HTML5 կտավի վրա

Այժմ մենք կարող ենք անցնել մի փոքր ավելի բարդ նկար, որում ներգրավված են շրջանակներ և աղեղներ: Մենք նկարելու ենք ժպտադեմ դեմք, որը հիմնականում ոչ այլ ինչ է, քան ճիշտ դիրքերում գտնվող որոշ գունավոր շրջանակներ: Ես նախ կտամ ձեզ ծածկագիրը, ապա ավելի մանրամասն կբացատրեմ, թե ինչ է կատարվում: Պարզապես հանեք նախորդ օրինակի գծագրության կոդը և այն փոխարինեք հետևյալով.

ctx.beginPath (); ctx.arc (150, 150, 100, 0, 2 * Math.PI, կեղծ); ctx.closePath (); ctx.fillStyle = "rgb (255, 0, 0)"; ctx. հարված (); ctx.fill (); ctx.beginPath (); ctx.arc (120, 130, 20, 0, 2 * Math.PI, կեղծ); ctx.closePath (); ctx.fillStyle = "rgb (255, 255, 255)"; ctx. հարված (); ctx.fill (); ctx.beginPath (); ctx.arc (123, 133, 4, 0, 2 * Math.PI, կեղծ); ctx.closePath (); ctx.fillStyle = "rgb (0, 0, 255)"; ctx. հարված (); ctx.fill (); ctx.beginPath (); ctx.arc (180, 130, 20, 0, 2 * Math.PI, կեղծ); ctx.closePath (); ctx.fillStyle = "rgb (255, 255, 255)"; ctx. հարված (); ctx.fill (); ctx.beginPath (); ctx.arc (183, 133, 4, 0, 2 * Math.PI, կեղծ); ctx.closePath (); ctx.fillStyle = "rgb (0, 0, 255)"; ctx. հարված (); 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. հարված (); ctx.fill ();

Ինձ պե՞տք է closePath ():

Մի փոքր ավելի բարդ է: Միշտ չէ, որ պետք է closePath () - ը լրացնելիս կամ շոյելիս, քանի որ այս հրամանները նաև փակում են ուղին: Շրջան ստանալու համար նաև կարող եք անել հետևյալը.

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

Ինչպե՞ս է գործում ժպիտով դեմքը նկարելը:

Ի՞նչ են անում այդ բոլոր startPath և closePath հրամանները: Եկեք սկսենք ավելի սերտ նայելով նախորդ օրինակի fillRect- ին: Կարևոր է գիտակցել, որ այս հրամանը կատարում է երկու բան. Այն ստեղծում է ուղղանկյունը, բայց նաև լրացնում է այն որոշակի գույնով: Միշտ չէ, որ ցանկանում եք միասին անել այս բաները. երբ ստեղծում եք հարմարեցված ձև, գուցե ցանկանաք նախ կատարել բոլոր գծանկարները, ապա ինսուլտ անել կամ լրացնել դրանք: Դա այն է, ինչ մենք պատրաստվում ենք անել այստեղ: Նկարչության բոլոր հրամանները միասին կոչվում են ուղի և դրանից հետո մենք որոշելու ենք, թե ինչպես ցույց տալ ուղին (շոյելով կամ լրացնելով այն):

Առաջին աղեղն օգտագործվում է կարմիր դեմքը նկարելու համար, հաջորդ չորս աղեղների հրամանները օգտագործվում են սպիտակ աչքերը կապույտ աշակերտներով նկարելու համար, իսկ վերջին աղեղը օգտագործվում է բերանը նկարելու համար: Ուշադրություն դարձրեք, թե ինչպես ենք մենք շոյում և լցնում այս աղեղը. Չնայած լիարժեք շրջան չենք գծում, այնուամենայնիվ, այն կարող ենք լցնել գույնով և դրանով ստեղծելով բերանը:

Երբ startPath- ով ուղի եք ստեղծում, այնուհետև կարող եք կատարել բոլոր տեսակի նկարչական հրահանգներ ՝ ձեր սեփական ձևը ստեղծելու համար: Դրանից հետո դուք կարող եք փակել ուղին closePath- ով: Դրանից հետո մենք նշում ենք strokeStyle- ը կամ fillStyle- ը, այնուհետև գործարկում ենք որոշ հարվածային կամ լրացման հրամաններ `ձևը նկարելու համար: Կարող եք նաև նախ նշել ոճերը, ապա ստեղծել ուղին: Կաթվածի և լրացման հրահանգները միշտ պետք է վերջին լինեն, քանի որ դրանք օգտագործում են հարվածային ոճը և լրիվ ոճը, ինչպես նաև ձեր ստեղծած ուղին:

Ինչպես նկարել աղեղներ HTML5 կտավի վրա

Մենք պատրաստվում ենք օգտագործել arc հրամանը ՝ շրջանակներ կամ շրջանակների մասեր ստեղծելու համար: Աղեղ նկարելու համար անհրաժեշտ է նշել դրա x կոորդինատը, y y կոորդինատը, շառավիղը, մեկնարկի անկյունը, վերջի անկյունը և ուզում եք գծել հակառակ ժամացույցի սլաքի ուղղությամբ, թե ոչ: Շառավիղը ցույց է տալիս, թե որքան մեծ կարող է լինել աղեղը կամ շրջանը (դրա շրջանի մաթեմատիկական շառավղը): Սկզբի և վերջի անկյունները ցույց են տալիս, թե որտեղ եք ցանկանում սկսել աղեղը նկարել, և որտեղ ուզում եք ավարտել աղեղը: Սա օգտակար է, երբ ոչ թե լրիվ շրջան եք գծում, այլ ընդամենը կես շրջան: Վերջապես, դուք պետք է ասեք ՝ ուզում եք ժամացույցի սլաքի հակառակ ուղղությամբ նկարել, թե ոչ (ճիշտ է, եթե ուզում եք, և կեղծ է, եթե դա չեք ուզում):

ՇՊՌԿ-ի սկզբի և վերջի անկյունները նշվում են ռադիաններում, որոնք տատանվում են 0-ից մինչև 2 անգամ մաթեմատիկական հաստատուն pi- ի մասին: Մեկնարկի անկյան համար 0 արժեքը նշանակում է, որ դուք սկսում եք արևելք (ժամացույցի ժամը 3-ի դիրքում) և 2 * pi վերջի անկյունը նշանակում է, որ ցանկանում եք լրիվ շրջան գծել (ուզում եք 2 * pi ռադիանով, այնպես որ դա լրիվ շրջան է):

Օրինակ, եթե ցանկանում եք ունենալ կես շրջան, ապա կունենաք 0 սկզբի անկյուն 0 և pi վերջի անկյուն ՝ 2 * pi փոխարեն: Այս կիսաշրջանը կլինի շրջանագծի ներքևի կեսը: Եթե ​​ցանկանում եք վերին կեսը, ապա ձեզ հարկավոր է ունենալ pi- ի սկզբի անկյուն և 2 * pi վերջի անկյուն:

Որպես օրինակ, 50 շառավղով (100, 100) -ում գտնվող շրջանագիծը, որը սկսում է գծվել արևելքից (0) և լրիվ շրջան (2 * pi) գծել ժամացույցի սլաքի ուղղությամբ (կեղծ է ժամացույցի սլաքի հակառակ ուղղությամբ), կլինի ctx: աղեղ (100, 100, 50, 0, Math.PI * 2, կեղծ); Փորձեք խաղալ սկզբի և վերջի անկյունների հետ ՝ պատկերացում կազմելու համար, թե որոնք պետք է լինեն դրանց արժեքները, երբ չես ուզում լրիվ շրջան գծել:

Ուշադրություն դարձրեք, որ վերջին աղեղի համար ես pi- ի փոխարեն օգտագործում եմ 3 արժեք (3.14 ...), այնպես որ դա կես շրջանից մի փոքր պակաս է: Սա գեղեցիկ հպում է ստեղծում ժպտացող դեմքի բերանին: Նկատեք, որ ես նաև նշում եմ գծի լայնությունը, որն ակնհայտորեն փոխում է բերանի շուրջ գծի լայնությունը: LineWidth- ի այս արժեքն օգտագործվում է շոյելիս:

Ինչպե՞ս ես գտա կոորդինատների և անկյունների բոլոր արժեքները: Ես պարզապես որոշ ժամանակ խաղացի, մինչև ստացա իմ ուզածը: Երբ դուք ծանոթ եք կոորդինատային համակարգին և անկյուններին, գիտեք, թե ինչ փոփոխություններ պետք է կատարեք աչքերը տեղափոխելու կամ բերանը ավելի մեծացնելու համար:

HTML5- ի լրացուցիչ ձեռնարկներ

• HTML5 ձեռնարկ ՝ նկարելով օղակներ և աղեղներ
  Շրջանակներ և աղեղներ նկարելը HTML5- ում կարող է բավականին մարտահրավեր լինել: Այս ձեռնարկում ես բացատրում եմ, թե ինչպես կարելի է գծեր և աղեղներ նկարել, և ինչպես են չափվում աղեղների անկյունները: Այս ձեռնարկը պարունակում է բազմաթիվ օրինակներ:
• HTML5 ձեռնարկ ՝ տեքստի նկարչություն շքեղ գույներով և էֆեկտներով
  Դուք կարող եք անել ավելին, քան պարզապես HTML5- ով տեքստ նկարել: Այս ձեռնարկի ընթացքում ես կցուցադրեմ տարբեր էֆեկտներ `մի քանի շքեղ տեքստեր պատրաստելու համար, ներառյալ ստվերները, գրադիենտները և պտտումը:

Այս հոդվածը ճշգրիտ է և համապատասխանում է հեղինակի լավագույն գիտելիքներին: Բովանդակությունը նախատեսված է միայն տեղեկատվական կամ ժամանցային նպատակներով և չի փոխարինում անձնական խորհրդատվությանը կամ մասնագիտական ​​խորհրդատվությանը բիզնեսի, ֆինանսական, իրավական կամ տեխնիկական հարցերում: