Aan de slag met HTML Canvas

Feb 12, 2026

Procedures

De HTML & LT; CANVAS & GT; element is een krachtige oplossing voor het maken van pixel-gebaseerde grafische afbeeldingen op het web met JavaScript , en stelt u in staat om een aantal opmerkelijke effecten met een beetje praktijk te creëren.

In deze tutorial zullen we een kijkje nemen om een canvasobject te maken, eenvoudige visuals erop te trekken en die visuals te animeren.

01. Maak een pagina

Canvas is fundamenteel een HTML-element dat u op de pagina plaatst, schaal om het gewenste gebied te dekken en kan dan tekenen. Om aan de slag te gaan, moeten we een eenvoudige pagina maken met een canvasobject.

 & LT;! DOCTYPE HTML & GT;
& lt; html & gt;
  & LT; HOOFD & GT;
  & LT; Meta CharsSet = 'UTF-8' / & GT;
  & LT; TITLE & GT; HTML Canvas Demo & LT; / TITLE & GT;
  & LT; LINK REL = 'Stylesheet' Href = 'Custom.css' / & GT;
  & lt; script src = "canvas.js" & gt; & lt; / script & gt;
  & LT; / HOOFD & GT;
  & LT; BODY & GT;
  & lt; canvas id = "HTML-canvas" & GT;
  & LT; / BODY & GT;
& LT; / HTML & GT;

02. Schaal het canvas

Om ons veel ruimte te geven om mee te spelen, willen we dat ons canvas het hele scherm vult. We geven het ook een zwarte achtergrond, zodat je weet dat het er absoluut is. Dit kan eigenlijk een beetje lastig zijn om te doen zonder te eindigen met schuifbalken of witte ruimte. De CSS hieronder moet ervoor zorgen.

 canvas {
  Hoogte: 100VH;
  Breedte: 100VW;
  Positie: absoluut;
  Achtergrondkleur: # 000000;

  marge: 0;
  Vulling: 0;
}

03. Initialiseer het canvas voor gebruik

Vervolgens moeten we wat JavaScript toevoegen om het canvas klaar te gebruiken voor gebruik. We zullen het een DomcontentLoaded-evenement afsluiten om ervoor te zorgen dat het script niet probeert te rennen voordat het canvaselement klaar is. We zullen het ook de canvasresolutie hebben ingesteld om overeen te komen met het gebied dat het dekt - anders zal het canvas opslaan zonder toenemende resolutie, wat leidt tot wazige of gepixelde grafische afbeeldingen.

 Document.ADDEVENTLISTENER ("domcontentloaded", functie () {
  VAR-canvas = document.getelementByID ("HTML-canvas");
  var cirkels = [];
  varradius = 50;
  canvas.width = canvas.clientbreedte;
  canvas.Height = canvas.clientheight;
  Var context = canvas.getcontext ("2D");
}, false);

04. Teken een vorm

Je zult merken dat we in de laatste stap iets hebben gecrasseerd dat een 'context' wordt genoemd. Dit is hoe het tekenen op canvas optreedt. Het is het gemakkelijkst om aan de context te denken als een penseel die we kunnen gebruiken om verschillende lijnen, bogen en basisvormen te tekenen.

Wat we nu kunnen doen, is onze context om te gebruiken door een trekcircle-functie te schrijven die een 360-graden boog zal maken - dat wil zeggen een cirkel. We doen dit door de context te vertellen om een boog te definiëren, styles instellen voor de grens en vullen, dan stijgt de vulling () en beroerte () functies om de vorm te tekenen (beroerte trekt de grens).

 Functie Drawcircle (X, Y, Radius, Border, Border_Colour, Fill_colour)
  
  context.Beginpath ();
  context.arc (x, y, straal, 0,2 * math.pi);
  context.strokestyle = border_colour;
  context.Fillstyle = Fill_colour;
  context.Linewidth = grens;
  context.closePath ();
  context. Vul ();
  context. Trek ();
  }

05. Maak veel cirkels

Super goed. We hebben een functie die cirkels kan tekenen. Nu hebben we iets nodig om te tekenen. Laten we de code vanaf stap 3 uitbreiden om een array te maken die cirkelobjecten beschrijft. Het slaat de X- en Y-coördinaten, kleur en een richtingwaarde op.

We creëren deze arraystructuur in plaats van alleen cirkels te tekenen, omdat het ons in staat zal stellen de cirkels te animeren door de inhoud van de array later opnieuw te tekenen.

 voor (var i = 0; i & lt; 20; i ++) {
  Var X = RADIUS + (MATH.RANDOM () * (CANVAS.WIDTH - (2 * RADIUS)));
  VAR Y = RADIUS + (MATH.RANDOM () * (CANVAS.HEIGHT - (2 * RADIUS)));
  var kleur = randomcolour ();
  Var-richting = MATH.RANDOM () * 2.0 * MATH.PI;
  cirkels.push ({x: x, y: y, kleur: kleur, richting: richting});
  trek(); }

06. Willekeurig de kleur

In de laatste stap hebben we een paar nieuwe functies gebruikt die nog niet zijn gedefinieerd. Laten we beginnen met randomcolour (). Dit wordt een nutsfunctie die een gerandomiseerde hexadecimale reeks retourneert die een kleur vertegenwoordigt. Het is vrij eenvoudig om te implementeren.

 Functie RandomColour () {
  Var Chars = '0123456789ABCDEF';
  var kleur = '#';
  voor (var i = 0; i & lt; 6; i ++) {
  Kleur + = tekens [MATH.VLOOR (MATH.RANDOM () * 16)];
  
  retourkleur; }

07. Teken de graphics op de pagina

Nu zijn we klaar om dingen bij elkaar te brengen door de functie Draw () te implementeren. Dit zal twee belangrijke dingen doen. Ten eerste zal het het canvas wissen met behulp van de functie Clearrect (). Dit zal belangrijk zijn wanneer we onze cirkels gaan animeren, om te voorkomen dat het nieuwe frame over de top van het oude is. Het wordt dan door de array die we hebben geconstrueerd en tekende elke cirkel op het canvas achter elkaar met behulp van onze trekcircle-functie.

 Functie Draw () {
  context.clearrect (0, 0, canvas.width, canvas.hoogte);
  cirkels.forach (functie (cirkel) {
  Drawcircle (Circle.x, Circle.y, Radius, 5, Circle.Colour, Circle.Colour);
    }

08. Animeer de vormen

Als u het nu probeert, ziet u enkele statische cirkels op de pagina geschilderd. Maar we willen ze animeren. Om dit te doen, moeten we onze trekking () op een paar manieren uitbreiden. Ten eerste gebruiken we de cirkel. Directionele waarde die we naar de array hebben geduwd om wijzigingen in X- en Y-positie voor de cirkel te berekenen.

Vervolgens gebruiken we een ingebouwde functie met de naam RequestanimationFrame die de functie Tone () recursief roept. VervroegerInationFrame stelt de browser toe om te beslissen wanneer u de functie opnieuw wilt bellen, de noodzaak om de timers te implementeren om te berekenen wanneer u het volgende frame moet tekenen.

 Functie Draw () {
  context.clearrect (0, 0, canvas.width, canvas.hoogte);
  cirkels.forach (functie (cirkel) {
  circle.x = circle.x + math.cos (cirkel.direction);
  cirkel.y = cirkel.y + math.sin (cirkel.direction);
  Drawcircle (Circle.x, Circle.y, Radius, 5, Circle.Colour, Circle.Colour);
  
  aanvrager (gelijkspel);
  }

09. Bounce aan de rand van de pagina

Er is echter nog een ding mis. De cirkels verdwijnen nu gewoon van de rand van het scherm. Laten we ze terugberen. Om dit te doen, voegen we een oproep aan een nieuwe functie, Bounce (Circle), binnen de functie Foreach-lus van de functie Tonen ().

De Bounce-functie bepaalt wanneer een cirkel zich aan de rand van het scherm bevindt en de richting van de richting op de juiste manier aanpast.

 Functie Bounce (Circle) {
  if (((Circle.x - Radius) & LT; 0) || ((cirkel.y - straal) & lt; 0) || ((cirkel.x + straal) & gt; canvas.width) || ((cirkel. Y + RADIUS) & GT; CANVAS.HEIGHT)) {
  Circle.Direction + = (MATH.PI / 2);
  
  if (circle.direction & gt; (2 * math.pi)) {
  Circle.Direction - = (2 * math.pi);
  
}

Dit artikel verscheen oorspronkelijk in Webdesigner uitgave 266. Koop het hier.

Gerelateerde artikelen:

Maak een digitale ets een schets met canvas
Alles wat u moet weten over het nieuwe NODE.JS 8
Hoe exporteren na effect-animaties naar HTML5

Aan de slag met HTML Canvas

01. Maak een pagina

02. Schaal het canvas

03. Initialiseer het canvas voor gebruik

04. Teken een vorm

05. Maak veel cirkels

06. Willekeurig de kleur

07. Teken de graphics op de pagina

08. Animeer de vormen

09. Bounce aan de rand van de pagina

Procedures - Meest populaire artikelen

Hoe instellen en optimaliseren van uw SmugMug Storefront

Kaartillustratie: een stap voor stap gids

10 manieren om betere 3D-wereldomgevingen te bouwen

Bouw een blog met raster en flexbox

Creëerperspectief in Adobe Illustrator

Aan de slag met Express.Js

5 tips voor supersnelle CSS

Converteer een foto in een VR-set

Categorieën