HTML5 - klipo metodas

Turinys
Naudojant skirtingus piešimo metodus, matomus drobė Juose galima apibrėžti piešiamas sritis, nors tai yra šiek tiek sudėtingiau, tačiau tai yra visiškai įmanoma, tačiau mes taip pat turime galimybę pasiekti tą patį rezultatą naudodami „clip“ () metodą.
Kitas aspektas, kurį taip pat galima įtraukti į drobė yra teksto piešinys, galbūt manome, kad naudodami CSS ir kitus elementus galime piešti tą patį ar geresnį tekstą, tačiau drobė leidžia mums pritaikyti vietines animacijas HTML5.
Klipo metodas
Kaip minėjome pradžioje, šis metodas supaprastina kelią kaip galime sukurti skiltį drobėje, kad būtų galima pristatyti kitus nupieštus elementus, pvz., naują piešinį, arba užpildyti jį tam tikra spalva.
Norėdami naudoti šį įrankį, turime paskambinti metodui klipas ()Šis metodas sukuria regioną kirpimas arba naują skyrių, pažiūrėkime, kaip veikia šis kodas:
 Pavyzdys Jūsų naršyklė nepalaiko šio elemento drobė 

Šiame kode pirmiausia nupiešiame didelį geltonos spalvos stačiakampį, tada jame sukuriame naują sritį, naudodami clip () metodas ir šiame regione sukuriame naują raudoną stačiakampį.
Pažiūrėkime, kaip tai atrodo mūsų naršyklėje:

Pieškite tekstą
Taip pat galime piešti tekstą ant drobės, tam turime šiuos metodus:
fillText (, x, y, width): Piešia ir užpildo pirmame parametre nurodytą tekstą padėtyje (x, y). Be to, jo argumentas pločio tai neprivaloma, tačiau paskelbus ji nustato teksto pločio apribojimą.
strokeText (, x, y, width): Piešia ir palieka tekstą be užpildymo padėtyje (x, y). Kaip ir ankstesnis metodas neprivalomame argumente, jis riboja teksto plotį.
Pažiūrėkime šį pavyzdį, kaip naudoti šiuos metodus piešti tekstą ant drobės:
 Pavyzdys Jūsų naršyklė nepalaiko šio elemento drobė 

Šiame kode mes naudojame abu metodus, norėdami piešti tą patį tekstą, tiek toje pačioje padėtyje, bet skirtingos spalvos, su kuria mes pasiekiame vienos spalvos išorinio rėmo ir kitos spalvos užpildo efektą, todėl galime sukurti daugiau ryškus skirtumas tarp fillText Y insultasTekstas.
Galiausiai ir baigdami šią pamoką pažiūrėkime, kaip ji atrodo naršyklėje.

Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką
wave wave wave wave wave