Inhoudsopgave
Met de verschillende tekenmethoden die te zien zijn in de canvas Het is mogelijk om gebieden binnen hen te definiëren om te tekenen, hoewel dit een beetje ingewikkelder is, is het volledig haalbaar, maar we hebben ook de mogelijkheid om hetzelfde resultaat te bereiken met behulp van de clip () methode.Een ander aspect dat ook kan worden opgenomen in de canvas is de teksttekening, misschien denken we dat we met CSS en andere elementen een tekst kunnen tekenen die er hetzelfde uitziet of er beter uitziet, maar in de canvas stelt ons in staat om native animaties toe te passen in HTML5.
Clip methode:
Zoals we in het begin al zeiden, vereenvoudigt deze methode de manier om hoe kunnen we een sectie binnen een canvas maken, om andere getekende elementen te kunnen introduceren, zoals een nieuwe tekening of deze te vullen met een specifieke kleur.
Om deze tool te gebruiken, moeten we de methode noemen klem (), wat deze methode doet, is een regio maken van knippen of een nieuwe sectie, laten we in de volgende code kijken hoe het werkt:
Voorbeeld Uw browser ondersteunt het element niet canvas In deze code tekenen we eerst een grote rechthoek in geel, dan maken we er een nieuw gebied in met behulp van de clip () methode en binnen dit gebied genereren we een nieuwe rode rechthoek.
Laten we eens kijken hoe dit eruit ziet in onze browser:
We kunnen ook tekst binnen een canvas tekenen, hiervoor hebben we de volgende methoden:
fillText (, x, y, breedte): Tekent en vult de tekst die is opgegeven in de eerste parameter op positie (x, y). Ook zijn argument breedte het is optioneel, maar wanneer het wordt gedeclareerd, stelt het een limiet in voor de breedte van de tekst.
strokeText (, x, y, breedte): Tekent en laat de tekst zonder opvulling op positie (x, y). Net als de vorige methode in zijn optionele argument beperkt het de breedte van de tekst.
Laten we het volgende voorbeeld bekijken van hoe u deze methoden kunt gebruiken om tekst op ons canvas te tekenen:
Voorbeeld Uw browser ondersteunt het element niet canvas In deze code gebruiken we beide methoden om dezelfde tekst te tekenen, beide op dezelfde positie maar met een andere kleur waarmee we een effect bereiken van een buitenkader van de ene kleur en een vulling van een andere kleur, hiermee kunnen we een meer duidelijk verschil tussen vulText Y beroerteTekst.
Laten we tot slot en om deze tutorial af te ronden eens kijken hoe het eruit ziet in de browser.
