Turinys
Kai naudojate daiktą drobė piešti mes neapsiribojame stačiakampių figūrų piešimu, taip pat galime piešti naudodami koordinates ir vadinamąsias keliai kurie yra keliai, kuriais nurodysime elementą drobė kur ir kaip parodyti mūsų piešinį.Galimybės, kurias tai mums suteikia, yra įspūdingos, nes naudodami reikiamus algoritmus galime padaryti neribotą kompoziciją, piešti bet kokio tipo figūrą HTML5 ir su juo, kol kartu su kitais elementais nepasiekiami rezultatai, kurie niekada nebuvo įsivaizduojami ankstesnėse kalbos specifikacijose.
Naudojant kelią
Kaip minėjome ,. kelias tai leis mums drobėje nurodyti koordinates, pagal kurias turėtų būti piešiamas piešinys, su šiomis koordinatėmis drobė galės žinoti, kur nubrėžti atitinkamas linijas, ir galų gale, teisingai sukaupę linijas, galime pasiekti bet kokias figūros tipas.
Prieš pereidami prie atitinkamų pavyzdžių, turime žinoti, kokie metodai galimi drobės elementui ir keliui, pažiūrėkime šį sąrašą:
- beginPath (): Šis metodas leidžia mums pradėti naują kelią.
- closePath (): Šis metodas bando uždaryti dabartinį kelią, nubrėždamas liniją nuo paskutinės eilutės pabaigos iki pradinių koordinačių.
- užpildyti (): Užpildykite formas, aprašytas pakelėse.
- isPointInPath (x, y): Pateikia teisingą, jei nurodytas taškas yra dabartinio kelio nubrėžtoje formoje.
- lineTo (x, y): Nubrėžkite papildomą kelią nurodytomis koordinatėmis.
- moveTo (x, y): Tai leidžia mums pereiti prie nurodytų koordinačių, nereikalaujant nubrėžti papildomo kelio.
- tiesiai (x, y, w, h): Nubrėžkite stačiakampį, kurio koordinatės viršutiniame kairiajame kampe atitinka (x, y). Jo plotis atitinka w, o aukštis - h.
- insultas (): Nubrėžkite išorines figūrų linijas, nubrėžtas potraukiu.
• Vadiname metodu beginPath.
• Naudodami metodą pereiname į pradinę padėtį Pereiti prie.
• Metodais nubrėžiame dalinius kelius lineToir kt.
• Pasirinktinai galime paskambinti metodui closePath.
• Galiausiai vadiname metodus užpildyti arba stoke.
Mes jau turime rekomenduojamą piešimo tvarką, dabar matome atitinkamą kodą HTML5.
Pavyzdys Jūsų naršyklė nepalaiko šio elemento drobė Kaip matome, yra du skambučiai beginPath(), tai mes galime pradėti piešti sritis ant drobės, tada su „moveTo ()“ nustatome pradines pozicijas, o likusi dalis - piešti.
Pažiūrėkime, kaip mūsų piešinys atrodo naršyklėje:
