Innehållsförteckning
Med de olika ritmetoderna som ses i duk Det är möjligt att definiera områden inom dem att rita, även om detta är lite mer komplext är det helt genomförbart, men vi har också möjlighet att uppnå samma resultat med hjälp av metoden clip ().En annan aspekt som också kan införlivas i duk är textritningen, kanske vi tror att med hjälp av CSS och andra element kan vi rita en text som är likadan eller snyggare, även om den är i duk tillåter oss att tillämpa inbyggda animationer i HTML5.
Clip -metod
Som vi nämnde i början förenklar denna metod vägen till hur kan vi skapa ett avsnitt inom en duk, för att kunna introducera andra ritade element, till exempel en ny ritning eller fylla den med en specifik färg.
För att använda detta verktyg måste vi kalla metoden klipp (), vad denna metod gör är att skapa en region av klippning eller ett nytt avsnitt, låt oss se i följande kod hur det fungerar:
Exempel Din webbläsare stöder inte elementet duk I den här koden ritar vi först en stor rektangel i gult, sedan skapar vi en ny region inom den med hjälp av clip () metod och inom denna region genererar vi en ny röd rektangel.
Låt oss se hur detta ser ut i vår webbläsare:
Vi kan också rita text inom en duk, för detta har vi följande metoder:
fillText (, x, y, bredd): Ritar och fyller texten som anges i den första parametern vid position (x, y). Också hans argument bredd det är valfritt men när det deklareras sätter det en gräns för textens bredd.
strokeText (, x, y, bredd): Ritar och lämnar texten utan vaddering i position (x, y). Liksom den tidigare metoden i dess valfria argument begränsar den textens bredd.
Låt oss se följande exempel på hur du använder dessa metoder för att rita text på vår duk:
Exempel Din webbläsare stöder inte elementet duk I denna kod använder vi båda metoderna för att rita samma text, både i samma position men med en annan färg som vi uppnår en effekt av en yttre ram med en färg och en fyllning av en annan färg, med detta kan vi skapa en mer markant skillnad mellan fillText Y strokeText.
Slutligen och för att avsluta denna handledning, låt oss se hur det ser ut i webbläsaren.
