យើងត្រូវរំលឹកឡើងវិញពីមេរៀនធរណីមាត្រ ដែលបានចែងថា ប្រព័ន្ធអ័ក្សកូអរដោនេក្នុងប្លង់ គឺជាប្រព័ន្ធដែលមានតែអ័ក្សពីរតែប៉ុណ្ណោះ គឺអ័ក្ស X និងអ័ក្ស Y ដែលប្រសព្វគ្នានៅចំនុចសូន្យដូចនៅក្នុងរូបខាងលើនេះ។
ប្រព័ន្ធអ័ក្សនេះត្រូវបានបង្កើតឡើងដោយអ្នកប្រាជ្ញបារាំងដ៏ល្បីឈ្មោះគឺលោក René Descartes ក្នុងគោលបំណងដោះស្រាយបញ្ហាធរណីមាត្រដោយប្រព័ន្ធកូអរដោនេ (geometry analytic) ដែលបានក្លាយទៅជាគោលការណ៍គ្រឹះមួយផងដែរ សំរាប់អ្នករៀនយកជំនាញខាងវិទ្យាសាស្ត្រកំព្យូទ័រផ្នែកក្រាភីក។
ក៏ប៉ុន្តែការយកប្រព័ន្ធអ័ក្សនេះមកប្រើប្រាស់នៅលើអេក្រង់កំព្យូទ័រ គឺមានសភាពខុសគ្នាបន្តិច ពីប្រព័ន្ធអ័ក្សដែលយើងធ្លាប់បានរៀននៅមធ្យមសិក្សា។ គឺថា នៅលើកញ្ចក់កំព្យូទ័រ ជ្រុងខាងឆ្វេងនិងលើគេបង្អស់ គឺជាចំណុចប្រសព្វនៃអ័ក្ស X និង អ័ក្ស Y ដែលមានកូអ័ដោនេ (0,0) ។ ហើយតំលៃលេខវិជ្ជមាននៃអ័ក្ស Y គឺស្ថិតនៅផ្នែកខាងក្រោមអ័ក្ស X ដែលផ្ទុយពីអ្វីដែលយើងបានរៀននៅមធ្យមសិក្សា។
មួយវិញទៀត យើងត្រូវរំលឹកឡើងវិញថា «ចំណុច» គឺជាធាតុផ្សំដំបូងគេបំផុតនៃគំនូរធរណីមាត្រទាំងឡាយ ហើយចំនុចច្រើនតភ្ជាប់គ្នាបង្កើតបានជាបន្ទាត់ឬខ្សែកោង ហើយបន្ទាត់ឬខ្សែកោងទាំងនោះតភ្ជាប់គ្នាបង្កើតបានជាពហុកោណដែលជារូប 2D និង ដែលមានជ្រុងចាប់ពី 3 ឡើងទៅ។ មួយវិញទៀត ពហុកោណជាច្រើនរួមគ្នាបង្កើតបានជារូប 3D ឬរូបក្នុងលំហរ។
ជាលទ្ធផល ការសិក្សាពីចំណុចនៅក្នុងផ្ទាំង canvas គឺជាជំហានដំបូងនៃការសិក្សាពី computer graphic នៅលើ browser ។ ជាទូទៅ ចំណុចនៅលើ canvas មានកូអ័រដោនេដែលមានតំលៃលេខពីរគឺ (x,y) ធៀបទៅនឹងចំនុចប្រសព្វនៃអ័ក្សទាំងពីរដែលមានកូអរដោនេ (0,0) ។ ហើយការគូសបន្ទាត់នៅលើ canvas គឺជាការភ្ជាប់ចំនុចពីដែលមានកូអរដោនេខុសគ្នា។ ពិនិត្យកម្មវិធីខាងក្រោមនេះ៖
នៅក្នុងកម្មវិធីខាងលើនេះ នៅលើបន្ទាត់លេខ 14 គឺជាការយកវិធីមានស្រាប់ឈ្មោះ moveTo() មកប្រើដើម្បីកំណត់កូអដោនេនៃចំណុចគល់បន្ទាត់។ ហើយនៅលើបន្តាត់លេខ 15 គឺជាការយកវិធីមានស្រាប់ឈ្មោះ lineTo() មកប្រើដើម្បីកំណត់កូអរដោនេចុងបន្ទាត់ដែលត្រូវគូរ។ ចំណែកឯវិធីឈ្មោះ stroke() វិញ គឺជាការកំណត់កំរាស់និងពណ៌សម្បុរនៃបន្ទាត់ដែលត្រូវគូរ។
Paths
| Method | Description |
|---|---|
| fill() | Fills the current drawing (path) |
| stroke() | Actually draws the path you have defined |
| beginPath() | Begins a path, or resets the current path |
| moveTo() | Moves the path to the specified point in the canvas, without creating a line |
| closePath() | Creates a path from the current point back to the starting point |
| lineTo() | Adds a new point and creates a line to that point from the last specified point in the canvas |
| clip() | Clips a region of any shape and size from the original canvas |
| quadraticCurveTo() | Creates a quadratic Bézier curve |
| bezierCurveTo() | Creates a cubic Bézier curve |
| arc() | Creates an arc/curve (used to create circles, or parts of circles) |
| arcTo() | Creates an arc/curve between two tangents |
| isPointInPath() | Returns true if the specified point is in the current path, otherwise false |
| rect() | Creates a rectangle |
| fillRect() | Draws a "filled" rectangle |
| strokeRect() | Draws a rectangle (no fill) |
| clearRect() | Clears the specified pixels within a given rectangle |
