Share
Dit is het eerste artikel in een serie dat u op de hoogte zal brengen van HTML5 canvas, de functie voor het tekenen zonder plug-ins die is ingebouwd in moderne browsers. In dit inleidende artikel laat ik je zien hoe je het canvas-element kunt openen, vormen kunt tekenen, kleuren kunt wijzigen en dingen kunt wissen. Het is een rondleiding langs de basis van deze verbazingwekkende nieuwe webtechnologie.
De serie wordt een opwindende rit en ik hoop dat je geniet. Ik neem aan dat je al vertrouwd bent met JavaScript, maar weinig tot geen ervaring hebt met canvas. Zelfs als je nog niet bekend bent met JavaScript, wees niet bang, want je zult nog steeds iets van deze artikelen te weten komen.
Het gebruik van het canvas-element is doodeenvoudig.
Als je aan canvas denkt, denk je waarschijnlijk aan de nieuwe HTML5 canvas element. Technisch gezien is dit slechts de helft van het verhaal, maar laten we dat voorlopig vergeten. De canvas element is het publieke gezicht van deze fraaie nieuwe functie van de browser.
De ... gebruiken canvas element is doodeenvoudig; het is een eenvoudige HTML-tag, met een gedefinieerde breedte en hoogte.
Dit doet nog niet veel. In feite voegt u alleen een transparant canvas op uw pagina in. De inhoud binnenin de canvas element is fallback-inhoud, die alleen wordt weergegeven als een browser canvas niet ondersteunt.
Browserondersteuning voor canvas is best verbazingwekkend.
Het is belangrijk om erop te wijzen dat de browserondersteuning voor canvas behoorlijk verbazingwekkend is. Elke moderne browser ondersteunt het, inclusief de nieuwste Internet Explorer.
Interessant is dat u via de ExplorerCanvas-plug-in enkele canvasfunctionaliteit in Internet Explorer versie 8 en lager kunt gebruiken.
Een belangrijke les die ik met canvas heb geleerd, is dat je expliciet de breedte en hoogte attributen van de canvas element bij het definiëren van de afmetingen. Als u CSS gebruikt om de breedte en hoogte in te stellen, wordt het canvas effectief opgeschaald naar dat formaat. Daar zit een logische reden achter; het heeft te maken met de canvas element dat een container is voor iets dat de 2d rendering context wordt genoemd. Het is echter alleen belangrijk om te weten dat het gebruik van CSS om de canvasafmetingen in te stellen een vreemd effect zal hebben.
Ik noemde in de laatste sectie dat de canvas element is slechts de helft van het verhaal. De andere helft is de 2D-rendering-context; het deel van canvas waarmee je de coole dingen kunt doen die je echt kunt zien.
Laat me één ding helemaal duidelijk maken: wanneer je canvas gebruikt, teken je niet op de canvas element zelf. In plaats daarvan maak je eigenlijk gebruik van de 2D-rendering-context, waartoe je toegang hebt door de canvas element via de JavaScript-API. Het maakt niet echt uit in het grote geheel van dingen, maar het is nuttig om te weten.
Als u eerder 2D-grafische programmeertalen heeft gebruikt (ActionScript, Processing, enz.), Weet u alles over op schermen gebaseerde coördinatensystemen. De 2D-renderingcontext in canvas is niet anders; het gebruikt een standaard cartesisch coördinatensysteem, met het oorsprongpunt (0, 0) links bovenaan. Naar rechts verplaatsen verhoogt de waarde van de X as, terwijl u naar beneden beweegt, verhoogt de waarde van de Y as. Het is vrij eenvoudig.
Eén eenheid in het coördinatensysteem is gelijk aan één pixel op het scherm (in de meeste gevallen).
Als u de 2D-renderingcontext daadwerkelijk wilt gebruiken, moet u de JavaScript-API gebruiken. Het deel van de API dat u wilt gebruiken, is het getContext methode, zoals zo:
Canvas helemaal opnieuw
Notitie: je gebruikt hier jQuery, maar alleen om te controleren wanneer de DOM klaar is. U kunt in plaats daarvan uw favoriete JavaScript-bibliotheek gebruiken of de code onder aan het document plaatsen.
Als gevolg van bellen getContext, de ctx variabele bevat nu een verwijzing naar de 2D-renderingcontext. Dit betekent dat je nu alles op zijn plek hebt om daadwerkelijk op het canvas te tekenen. Het leuke deel!
Nu u toegang hebt tot de 2D-rendering-context, kunt u beginnen met het aanroepen van de tekenmethoden van de API. Een van de meest elementaire is fillRect, die een rechthoek tekent die in een bepaalde kleur is ingevuld (standaard zwart).
Voeg de volgende code toe onder de ctx variabele van vroeger:
ctx.fillRect (50, 50, 100, 100);
Hiermee teken je een zwart vierkant dat iets uit de linker- en bovenrand van het canvas is geplaatst, zoals het volgende:
U hebt zojuist uw eerste vorm getekend met HTML5 canvas. Voelt goed, toch?
Notitie: U zult merken dat u de rechthoekmethode van de JavaScript-API gebruikt om vierkanten te tekenen. Dit komt omdat er geen methoden in canvas zijn om vierkantjes rechtstreeks te tekenen, eenvoudig omdat vierkanten zijn rechthoeken (ze hebben vier zijden met rechte hoeken ertussen).
Er zijn vier argumenten in een aanroep voor fillRect:
Geschreven is pseudocode, fillRect zou er als volgt uitzien:
ctx.fillRect (x, y, width, height);
Het leuke is dat je niet beperkt bent tot alleen gevulde rechthoeken. Nee. Je kunt ook gestreepte rechthoeken tekenen; dat wil zeggen, rechthoeken met een omtrek eromheen. Om dat te doen kunt u de strokeRect methode van de JavaScript-API, zoals zo:
ctx.strokeRect (50, 50, 100, 100);
Het gebruikt exact dezelfde argumenten als fillRect, en het resultaat is een mooie schets van een vierkant:
Eenvoudig. Elegant. Gemakkelijk. Dat vat echt canvas samen. Alle methoden zijn eenvoudig als ze afzonderlijk worden bekeken, maar als ze samen worden gebruikt, kun je een aantal verbazingwekkende dingen tekenen.
Afgezien van rechthoeken (de enige vormen die kunnen worden getekend met een enkele API-methode), hebt u paden. Paden stellen je in staat om lijnen te tekenen, zowel recht als gebogen, die kunnen worden gecombineerd om vrij complexe vormen te creëren.
Het tekenen van een eenvoudig pad vereist het gebruik van een paar nieuwe API-methoden:
Accentsconagua
beginPath start een nieuw pad.moveTo verplaatst het punt waar het pad naartoe wordt getrokken.lineTo tekent een recht pad naar dit punt vanaf het punt dat is gedefinieerd in moveTo of het punt van de laatste oproep naar lineTo.closePath sluit het pad door het laatste punt met het startpunt te verbinden.vullen vult het pad met een kleur.beroerte schetst het pad.Probeer de volgende code:
ctx.beginPath (); ctx.moveTo (50, 50); ctx.lineTo (50, 250); ctx.lineTo (250, 250); ctx.closePath (); ctx.fill ();
Welke een driehoekspad zal tekenen en vul het:
U kunt hetzelfde concept gebruiken om elke gewenste vorm te tekenen. Het tweede artikel in deze reeks behandelt geavanceerdere paden in canvas, zoals bogen (om cirkels te maken) en Bezier-paden (om koele bochtige lijnen te maken).
Het belangrijkste om te onthouden is dat paden vrijwel de enige manier zijn om iets gecompliceerder dan een rechthoek te tekenen.
Tot dusverre is alles wat je hebt getekend, gevuld of geaaid in het zwart. Hoe spannend! Gelukkig zijn er een aantal eigenschappen binnen de JavaScript-API waarmee u de kleur van de vormen die u tekent, kunt wijzigen. Deze eigenschappen zijn fillStyle en strokeStyle.
Ze zijn allebei vrij voor zichzelf, dus laten we er in springen en de vulkleur van een rechthoek wijzigen:
ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (50, 50, 100, 100);
Dit geeft je een mooi rood vierkant, zoals:
Of u kunt de stookkleur van een rechthoek wijzigen:
ctx.strokeStyle = "rgb (255, 0, 0)"; ctx.strokeRect (50, 50, 100, 100);
Dat geeft je een vierkant met een rode omtrek:
De schoonheid van fillStyle en strokeStyle is dat ze allebei de normale CSS-kleurwaarden accepteren. Dat betekent dat u RGB-, RGBA-, HSA-, kleurenwoorden (bijv. "Rood") en hexadecimale waarden kunt gebruiken.
Het is de moeite waard om erop te wijzen dat het veranderen van de kleur in het canvas niets beïnvloedt dat al is getekend. Als u bijvoorbeeld een zwarte rechthoek tekent, wijzigt u de opvulstijl in rood en tekent u vervolgens een andere rechthoek; de eerste rechthoek is nog steeds zwart.
Afgezien van het veranderen van kleur, kunt u ook de breedte van een gestreept kader wijzigen. Om dit te doen, kunt u de lijnbreedte eigenschap van de JavaScript-API.
Met behulp van de code uit het vorige voorbeeld, kunt u de breedte van de omtrek wijzigen:
ctx.lineWidth = 20; ctx.strokeStyle = "rgb (255, 0, 0)"; ctx.strokeRect (50, 50, 100, 100);
Wat je een mooie en dikke rode streek zal geven:
Hetzelfde concept werkt ook voor paden. U kunt bijvoorbeeld de driehoek van vroeger wijzigen om een dikkere omtrek te krijgen:
ctx.lineWidth = 20; ctx.beginPath (); ctx.moveTo (50, 50); ctx.lineTo (50, 250); ctx.lineTo (250, 250); ctx.closePath (); ctx.stroke ();
Dat geeft je een ongelooflijk opwindende dikke driehoek:
Er zijn ook enkele andere functies van de JavaScript-API waarmee u de manier waarop lijnen worden getekend, kunt wijzigen. Bijvoorbeeld, linecap verandert de manier waarop het einde van een regel eruit ziet, en lineJoin verandert de manier waarop de hoeken in een lijn eruitzien. Bekijk deze functies (en meer) zeker in de canvasspecificatie.
Het laatste dat ik je wil leren, is hoe je het canvas kunt wissen. Je hebt geleerd hoe je vormen tekent, maar niet hoe je ze echt kunt verwijderen, wat behoorlijk handig kan zijn.
Gelukkig is het wissen van het canvas eenvoudig; u heeft slechts één methode nodig uit de JavaScript-API. Die methode is clearRect, en het is zijn taak om elke pixel in de rechthoek transparant te maken.
In dit artikel is het canvas 500 pixels breed en 500 pixels lang, zodat je het hele canvas eenvoudig kunt wissen door te callen clearRect zoals zo:
ctx.fillRect (50, 50, 100, 100); ctx.clearRect (0, 0, 500, 500);
Het heeft geen zin om je hiervan een screenshot te laten zien, want als het werkt zou je absoluut niets moeten zien. De gevulde rechthoek wordt feitelijk getekend, maar deze wordt direct daarna gewist, zodat u hem niet kunt zien.
Notitie: De argumenten in clearRect zijn hetzelfde als fillRect; X, Y, breedte en hoogte.
Als u niet zeker bent van de breedte en hoogte van het canvas, kunt u het ook als volgt wissen:
ctx.clearRect (0, 0, canvas.width, canvas.height);
Dit gebruikt de breedte en hoogte eigenschappen van de canvas element zelf, wat ongelooflijk handig is en een veel betere manier om dingen te doen.
U hoeft niet het hele canvas te wissen als u dat niet wilt. In plaats daarvan kunt u vrij eenvoudig een klein gedeelte wissen. Stel je bijvoorbeeld voor dat je een zwart vierkant hebt getekend naast een rood vierkant:
ctx.fillRect (50, 50, 100, 100); ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (200, 50, 100, 100);
Die zou er normaal zo uitzien:
Je zou het zwarte vierkant kunnen wissen en het rode vierkant intact laten door er een oproep aan toe te voegen clearRect onder:
ctx.clearRect (50, 50, 100, 100);
Merk op hoe deze aanroep van clearRect een positie en grootte definieert die hetzelfde is als het zwarte vierkant. Dit betekent in feite dat alleen de pixels in het gebied van het vierkant worden gewijzigd in transparant zwart (ze worden gewist):
Behoorlijk handig, toch? Het canvas wissen is niet iets dat je veel zult gebruiken bij statische tekeningen, maar het is iets dat je veel zult gebruiken wanneer je later in deze serie gaat animeren..
Canvas is gemakkelijk te gebruiken, snel te leren en krachtig wanneer je het tot het uiterste drijft.
Dus, zoals ik hoop dat je kunt zien, is canvas een bijzonder krachtig nieuw onderdeel van de browser. Hiermee kunt u afbeeldingen maken, code gebruiken en zonder een enkele plug-in te gebruiken. Het is gemakkelijk te gebruiken, het is snel om te leren en het is dodelijk krachtig wanneer je het tot het uiterste drijft.
In het volgende artikel wordt een aantal van de meer geavanceerde functies van canvas bekeken, zoals tekencirkels, gebogen paden en iets dat de tekentoestand wordt genoemd. En alsof dat nog niet genoeg is, zul je later in de serie kijken hoe je tekeningen kunt transformeren (zoals rotatie en schaal), hoe je afbeeldingen manipuleert en eindigt met een kijk op hoe je kunt animeren. Het gaat heel spannend worden, geloof me.
Voor nu hoop ik dat ik je genoeg heb gegeven om je zin te geven aan canvas en uit te gaan en er meer over te leren. Canvas is een fantastische technologie die echt de moeite waard is om te begrijpen, zelfs als je niet van plan bent om het meteen te gebruiken.
