✅ HTML5 - Tekenen op het canvas

Inhoudsopgave

De sleutel tot sterke constructies is de basis, hiervoor moeten we sterke en goed gedefinieerde fundamenten hebben, daarom om het element maximaal te kunnen gebruiken Canvas Eerst moeten we de basisaspecten grondig kennen en daarom gaan we basisvormen tekenen, hiermee leren we hoe de verschillende tekenmethodes werken en dan kunnen we complexere composities maken.
Teken een rechthoek
De rechthoek is een heel eenvoudige figuur die uit 4 zijden bestaat, laten we eens kijken naar de methoden die we beschikbaar hebben om deze op het canvas te kunnen tekenen:

clearRect (x, y, w, h): Reinigt een rechthoek of een deel van een eerder opgegeven rechthoek.
fillRect (x, y, w, h): Wordt gebruikt om een gevulde rechthoek te tekenen.
strokeRect (x, y, w, h): Wordt gebruikt om een rechthoek te tekenen zonder vulling.

Zoals we zullen hebben opgemerkt, gebruiken de vorige methoden allemaal 4 argumenten, deze argumenten komen overeen met het volgende:

x en zijn de grenzen van de linkerbovenrand van de rechthoek.
NS corresponderen met respectievelijk breedte en hoogte.

Laten we een eenvoudig voorbeeld bekijken, zodat we deze elementen in de praktijk kunnen brengen:

 Voorbeeld Uw browser ondersteunt het element niet canvas

In dit voorbeeld zien we dat we enkele variabelen definiëren, waarbij we zeggen: offset of beperk waar de rechthoeken zullen beginnen, de grootte en dan een var-telling die zal dienen als een teller om de herhalingen te doen, dus we zien in de volgende sectie dat we weten dat we rechthoeken dynamisch zullen maken, laten we eens kijken hoe ze worden getekend in onze browser:

We hebben twee rijen van elk 5 rechthoeken gemaakt, als we kijken naar de code die we de methoden hadden genoemd vulRect () eerst voor gevulde rechthoeken en dan naar beroerteRect voor de niet gevulde.
De methode clearRect () gebruiken
Wat als we nu een deel van de gevulde rechthoeken willen opschonen? Hiervoor hebben we de methode: duidelijkRecht (), in de volgende code zullen we zien hoe het werkt:

 Voorbeeld Uw browser ondersteunt het element niet canvas

Voor elke herhaling passen we een aanroep toe op de methode duidelijkRecht () en bij het uitvoeren van het algoritme hebben we het door het hele midden van de gevulde rechthoeken laten gaan, laten we in de volgende afbeelding zien hoe het eruit ziet in onze browser:

Hier kunnen we zien hoe we een gebied hebben schoongemaakt dat we eerder hadden getekend.
Hiermee sluiten we deze tutorial af, waar we een beetje meer diepgaande enkele methoden hebben kunnen zien die we kunnen gebruiken om in ons element te tekenen Canvas.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven