របៀបប្រើប្រាស់ Canvas នៅលើ HTML5

canvas គឺជាធាតុស្លាក (tag element) នៅក្នុង HTML5 ដែលប្រើសំរាប់គូរក្រាហ្វិកបានយ៉ាងលឿននៅលើវេបសាយតាមរយះ JavaScript។ នៅក្នុងអត្ថបទនេះ Techfree នឹងលើកយកអំពី របៀបប្រើប្រាស់ Canvas មកបង្ហាញជូនអ្នកទាំងអស់គ្នា។

ដើម្បីចាប់ផ្តើមជាមួយនឹង Canvas អ្វីដែលអ្នកទាំងអស់គ្នាត្រូវការគឺ Editor សំរាប់សរសេរកូដនិងកម្មវិធីមើលវេបសាយ (Browser) ជាមូយ HTML5 ។ ខ្ញុំសូមលើកយក Editor Sublime និងកម្មវិធីមើលវេបសាយ (Browser) Google Chrome មកបង្ហាញអ្នកទំាងអស់គ្នាទៅតាមដំណាក់កាលដូូចខាងក្រោម៖

១៖ របៀបគូរបន្ទាត់ដោយប្រើ(Canvas)

ដើម្បីគូរបន្ទាត់ជាមួយ Canvas HTML5 ត្រូវអនុវត្តទៅតាមបូនចំនុចដូចខាងក្រោម។ យើងចាប់ផ្តើម ជាមួយវិធីសាស្រ្ត beginPath() គឺជាទីតាំងដំបូង ឬ ក៏ទៅកាន់ការកំនត់ចំនុចថ្មី បន្ទាប់មកទៀត យើងប្រើ moveTo(x, y) ជាវិធីសាស្រ្តសំរាប់ដៅចំនុចចាប់ផ្តើម។ បន្ទាប់មកយើងប្រើ lineTo(x, y) ជាវិធីសាស្រ្តសំរាប់ផ្តល់តម្លៃចុងក្រាយ ដោយធ្វើការភ្ជាប់ទៅចំនុចទាំងពីរ ហើយវិធីសាស្រ្តមួយទៀត stroke() គឺជាវិធីសាស្រ្តសំរាប់ធ្វើការបង្ហាញបន្ទាត់ជាមួយនឹងពណ៌ធម្មតា។ របៀបគូរបន្ទាត់ដោយប្រើ(Canvas)មួយអាចត្រូវបានកំណត់ដូចខាងក្រោម៖

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

២៖ របៀបគូរអក្សរដោយប្រើ(Canvas)

យើងគូរស្ទាយអក្សរ ដោយប្រើ Convas យើងអាចប្រើវិធីសាស្រ្តមូយគឺ fillText(string, x , y) ជាមូយបណ្តុំតម្លៃនៃ Font size និងស្ទាយអក្សរ។ សូមអនុវត្តជាមួយកូដដូចបង្ហាញខាងក្រោម៖

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

៣៖ របៀបគូសរង្វង់ដោយប្រើ(Canvas)

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

៤៖ របៀបបង្កើតស្ទាយពណ៌(Gradient) ជាមួយនឹង Canvas នៅលើ HTML5

នៅចំនុចនេះ Techfree នឹងលើកយកអំពី Color Gradient ដែលមានភាពងាយស្រូលដល់ការបង្តើតវេបសាយដោយប្រើ Canvas នៅលើ HTML5 ដែលធ្វើអោយវេបសាយកាន់មានពណ៌ស្រស់ស្អាតជាងមុនដោយមិនចាំបាច់ប្រើ Adobe Editor។ ដូចនេះអ្នកទាំងអស់គ្នាអាចអនុវត្ត តាមកូដដូចខាងក្រោម៖

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

ប្រភពដើម