Kom i gang med HTML-lærred

Sep 16, 2025
hvordan

HTML & LT; Canvas & GT; Element er en kraftfuld løsning til oprettelse af pixelbaseret grafik på nettet ved hjælp af JavaScript. , og vil give dig mulighed for at skabe nogle bemærkelsesværdige effekter med en smule praksis.

I denne tutorial tager vi et kig på at oprette et lærredobjekt, tegne enkle billeder på det og animere disse visuelle.

01. Opret en side

Canvas er fundamentalt et HTML-element, som du placerer på siden, skalaen for at dække det ønskede område og kan derefter trække på. For at komme i gang skal vi oprette en simpel side med et lærredobjekt. 

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; hoved & gt;
  & lt; meta charset = 'utf-8' / & gt;
  & lt; titel & gt; html lærred demo & lt; / titel & gt;
  & lt; link rel = 'stylesheet' href = 'custom.css' / & gt;
  & lt; script src = "canvas.js" & gt; & lt; / script & gt;
  & lt; / Head & GT;
  & lt; body & gt;
  & lt; lærred ID = "HTML-Canvas" & GT;
  & lt; / body & gt;
& lt; / HTML & GT;

02. Skal lærredet

For at give os masser af plads til at lege med, vil vi have vores lærred til at fylde hele skærmen. Vi vil også give det en sort baggrund, så du ved, at det er helt sikkert der. Dette kan faktisk være lidt vanskeligt at gøre uden at ende med rullebjælker eller hvidt rum. CSS nedenfor skal tage sig af det. 

 Canvas {
  Højde: 100Vh;
  Bredde: 100VW;
  position: absolut;
  Baggrundsfarve: # 000000;
}
  Margin: 0;
  Padding: 0;
}

03. Initialiser lærredet til brug

Dernæst skal vi tilføje nogle JavaScript for at oprette lærredet klar til brug. Vi får det til at hænge en domcontentloaded begivenhed for at sikre, at scriptet ikke forsøger at køre, før lærredelementet er klar. Vi vil også få det til at sætte lærredsopløsningen for at matche det område, det dækker - ellers vil lærredet skalere op uden at øge opløsningen, hvilket fører til sløret eller pixelleret grafik. 

 ​​DOCUMENT.ADDEVENTLISTENER ("DOMCONTENTLOASE", FUNKTION () {
  Var Canvas = Document.GetelementById ("HTML-Canvas");
  Var Circles = [];
  Var radius = 50;
  Canvas.width = Canvas.clientwidth;
  Canvas.Height = Canvas.clientHeight;
  var kontekst = lærred.getcontext ("2d");
}, falske);

04. Tegn en form

Du vil bemærke, at vi i sidste trin kaster vi noget, der hedder en 'kontekst'. Sådan opstår tegning på lærred. Det er nemmest at tænke på sammenhængen som en pensel, som vi kan bruge til at tegne forskellige linjer, buer og grundlæggende former.

Det, vi nu kan gøre, er at sætte vores sammenhæng til at bruge ved at skrive en drawcircle-funktion, der vil skabe en 360-graders bue - det vil sige en cirkel. Vi gør dette ved at fortælle konteksten for at definere en bue, sætte stilarter til grænsen og fylde, så stiger fyldningen () og slagtilfælde () funktioner til faktisk at tegne formen (slagtilfælde trækker grænsen). 

 ​​Funktion Drawcircle (X, Y, Radius, Border, Border_colour, Fill_colour)
  {
  kontekst.beginpath ();
  kontekst.arc (x, y, radius, 0,2 * math.pi);
  kontekst.strokestyle = border_colour;
  kontekst.fillstyle = fill_colour;
  kontekst.linewidth = grænsen;
  kontekst.closepath ();
  kontekst.fyld ();
  kontekst.Stroke ();
  }

05. Opret mange cirkler

Store. Vi har en funktion, der kan tegne cirkler. Nu har vi brug for noget at tegne. Lad os udvide koden fra trin 3 for at oprette et array, der beskriver cirkelobjekter. Det vil gemme hver cirkel x og y koordinater, farve og en retningsværdi.

Vi opretter denne array struktur snarere end bare at trække cirkler straks, fordi det vil gøre det muligt for os at animere cirklerne ved at genskabe indholdet af arrayet senere. 

 ​​For (var I = 0; I & LT; 20; I ++) {
  var x = radius + (math.random () * (lærred.width - (2 * radius)));
  VAR Y = RADIUS + (Math.Random () * (Canvas.Height - (2 * radius)));
  var farve = randomcolour ();
  VAR Direction = Math.Random () * 2.0 * math.pi;
  circles.push ({x: x, y: y, farve: farve, retning: retning});
  tegne(); }

06. RANDOMISE Farven

I det sidste trin har vi brugt et par nye funktioner, der ikke er blevet defineret endnu. Lad os starte med RandomColour (). Dette vil være en hjælpefunktion, der returnerer en randomiseret hexadecimal streng, der repræsenterer en farve. Det er ret ligetil at implementere. 

 ​​Funktion RandomColour () {
  VAR CARS = '0123456789ABCDEF';
  var farve = '#';
  for (var I = 0; I & LT; 6; I ++) {
  farve + = chars [math.floor (math.random () * 16)];
  }
  returnere farve; }

07. Tegn grafikken på siden

Nu er vi klar til at bringe ting sammen ved at implementere tegningen () funktionen. Dette vil gøre to vigtige ting. For det første vil det rydde lærredet ved hjælp af ClearRect () -funktionen. Dette vil være vigtigt, når vi kommer til at animere vores cirkler for at undgå at tegne den nye ramme over toppen af ​​den gamle. Det vil så gentage gennem arrayet vi konstruerede og tegne hver cirkel på lærredet i rækkefølge ved hjælp af vores trækkredsfunktion. 

 ​​Funktion Draw () {
  kontekst.clearrect (0, 0, lærred.width, lærred.Height);
  circles.foreach (funktion (cirkel) {
  trækkreds (cirkel.x, cirkel.y, radius, 5, cirkel.colour, cirkel.colour);
    }); }

08. Animere formerne

Hvis du prøver det nu, vil du se nogle statiske cirkler malet på siden. Men vi ønsker at animere dem. For at gøre dette skal vi udvide vores tegning () funktion på et par måder. For det første bruger vi Circle.Direction-værdien, vi skubbede til arrayet for at beregne ændringer i X og Y position for cirklen.

Derefter bruger vi en indbygget funktion kaldet RequestAnimationFrame, der rekursivt kalder tegningen () funktionen. RequestAnimationFrame gør det muligt for browseren at bestemme, hvornår du skal ringe til funktionen igen, idet man undgår behovet for at gennemføre timere for at beregne, hvornår du skal tegne den næste ramme. 

 ​​Funktion Draw () {
  kontekst.clearrect (0, 0, lærred.width, lærred.Height);
  circles.foreach (funktion (cirkel) {
  cirkel.x = cirkel.x + math.cos (cirkel.direction);
  cirkel.y = cirkel.y + math.sin (cirkel.direction);
  trækkreds (cirkel.x, cirkel.y, radius, 5, cirkel.colour, cirkel.colour);
  });
  RequestanimationFrame (Draw);
  }

09. Bounce på kanten af ​​siden

Der er dog en ting, der stadig mangler. Cirklerne forsvinder nu bare ud af kanten af ​​skærmen. Lad os få dem til at hoppe tilbage. For at gøre dette, tilføjer vi et opkald til en ny funktion, hoppe (cirkel), inden for foreach-loop af tegnefunktionen ().

Bounce-funktionen bestemmer, hvornår en cirkel er i kanten af ​​skærmen, og justerer dens retningsværdi korrekt. 

 ​​Funktionshop (cirkel) {
  IF (((Circle.x - Radius) & LT; 0) || 0) || ((cirkel.x + radius) & gt; lærred.width) || ((cirkel. Y + RADIUS) & GT; Canvas.Height)) {
  Circle.Direction + = (math.pi / 2);
  }
  hvis (cirkel.direction & gt; (2 * math.pi)) {
  Circle.Direction - = (2 * math.pi);
  }
}

Denne artikel optrådte oprindeligt i Webdesigner Udgave 266. Køb det her.

Relaterede artikler:

  • Opret en digital etch en skitse ved hjælp af lærred
  • Alt hvad du behøver at vide om den nye node.js 8
  • Sådan eksporteres After Effects Animationer til HTML5

hvordan - Mest populære artikler

Sådan redigeres en video på Tiktok

hvordan Sep 16, 2025

(Billedkredit: Mabel Wynne) At lære at redigere en video på Tiktok, ville sandsynligvis ikke have været noget, du ..

Kom i gang med Bulma

hvordan Sep 16, 2025

(Billedkredit: Bulma) Vil du komme i gang med at bruge Bulma? Du er på det rigtige sted. Bulma er en populær CSS-ra..

Master Version Control for Remote Teams

hvordan Sep 16, 2025

Arbejde fjernt er blevet meget mere almindeligt i webudvikling i løbet af de sidste par år. Før versionskontrol ville arbejdet..

Kom i gang med rust

hvordan Sep 16, 2025

Side 1 af 2: Side 1 Side 1 Side 2. ..

Opret en animeret 3D-tekst effekt

hvordan Sep 16, 2025

Kærlighed tabt af Canada's. JAM3. Er et smukt mørkt mobil-klar interaktivt digt med ægte hjerte om de vedvarende føle..

Sådan skaber du glødende farver med olie maling

hvordan Sep 16, 2025

Bliver bedt om at beskrive min maleri teknik er mærkeligt for mig, og ærligt er det svært at gøre. Jeg er en i..

Sådan tilføjes tekstur til dine pasteller med primere

hvordan Sep 16, 2025

Ved brug af pastel primers. For at skabe overflader til din kunst betyder, at du kan opbygge en mere struktureret ..

Sådan master hudskygger i 3D

hvordan Sep 16, 2025

I lang tid nu har jeg siddt i en rut med min 3D Art. . Ikke med at skabe modeller eller scener - jeg er altid tilf..

Kategorier