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:
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.
