JavaScript Academy · Oppitunti

Kuvien ja tekstin käsittely

Piirtäkää kuvia ja tyyliteltyä tekstiä canvakselle.

Oppitunti 3/413 vaihetta

Kuvien ja tekstin käsittely on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Kuvan lataaminen

Canvas piirtää HTMLImageElement-elementistä. Luokaa Image-objekti, asettakaa sen src ja odottakaa onload-tapahtumaa ennen piirtämistä — pikselit eivät ole käytettävissä sitä ennen.

const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "/logo.png";

drawImage-metodin perusteet

drawImage(img, dx, dy) piirtää kuvan annettuun sijaintiin sen luonnollisessa koossa.

img.onload = () => {
  ctx.drawImage(img, 20, 20);
};

Kuvien skaalaaminen

Viiden argumentin muoto drawImage(img, dx, dy, dWidth, dHeight) skaalaa kuvan kohderuudun kokoiseksi.

ctx.drawImage(img, 0, 0, 160, 90); // fit into 160x90

Rajaus lähderuudun avulla

Yhdeksän argumentin muodon avulla kuva voidaan rajata: drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight). Ensimmäiset neljä argumenttia kuvaavat lähdekuvasta rajattavaa aluetta.

ctx.drawImage(img, 0, 0, 50, 50, 10, 10, 100, 100); // crop 50x50 → scale to 100x100

Täytetyn tekstin piirtäminen

fillText(text, x, y) piirtää tekstin käyttäen fillStyle-tyyliä. Oletusarvoisesti y-koordinaatti määrittää tekstin peruslinjan.

ctx.fillStyle = "#2c3e50";
ctx.font = "24px sans-serif";
ctx.fillText("Hello Canvas", 20, 50);

Ääriviivallinen teksti

strokeText(text, x, y) piirtää ainoastaan ääriviivan käyttäen strokeStyle-tyyliä ja lineWidth-arvoa.

ctx.font = "40px bold serif";
ctx.lineWidth = 2;
ctx.strokeStyle = "navy";
ctx.strokeText("Outline", 20, 80);

font-ominaisuus

font noudattaa CSS:n lyhytmerkintää: [style] [weight] size family. Koko ja fonttiperhe ovat pakollisia.

ctx.font = "italic bold 28px Georgia, serif";

Tekstin tasaus

textAlign (start/end/left/right/center) määrittää vaakasuuntaisen ankkuroinnin, ja textBaseline (top/middle/alphabetic/bottom) määrittää pystysuuntaisen ankkuroinnin annetun pisteen ympärillä.

ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Centered", canvas.width / 2, canvas.height / 2);

Tekstin mittaaminen

measureText(text) palauttaa TextMetrics-objektin. Sen width-ominaisuus kertoo, kuinka leveänä teksti piirretään — tämä on olennaista asettelussa ja rivittämisessä.

const m = ctx.measureText("How wide?");
console.log(m.width); // pixels

Yksinkertainen sananvaihto

Pitkät merkkijonot voi jakaa usealle riville yhdistämällä measureText-metodin silmukkaan.

function wrap(ctx, text, x, y, maxW, lh) {
  let line = "";
  for (const word of text.split(" ")) {
    const test = line + word + " ";
    if (ctx.measureText(test).width > maxW && line) {
      ctx.fillText(line, x, y);
      line = word + " ";
      y += lh;
    } else {
      line = test;
    }
  }
  ctx.fillText(line, x, y);
}

Varjot syvyyden luomiseksi

Varjo-ominaisuudet vaikuttavat muotoihin, kuviin ja tekstiin: shadowColor, shadowBlur, shadowOffsetX/Y.

ctx.shadowColor = "rgba(0,0,0,0.4)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.fillText("With shadow", 20, 60);

Pikatesti

Testatkaa, miten hyvin osaatte piirtää kuvia ja tekstiä.

Vastaa interaktiivisessa oppitunnissa

Kertaus: Kuvat ja teksti

Opitte lataamaan kuvia ja piirtämään niitä skaalattuina ja rajattuina drawImage-metodilla, piirtämään tekstiä fillText/strokeText-metodeilla, määrittämään font-ominaisuuden, tasaamaan tekstiä, mittaamaan leveyksiä measureText-metodilla ja lisäämään varjoja. Seuraavaksi käsitellään animaatioita.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Kuvien ja tekstin käsittely” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Kuvien ja tekstin käsittely”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Kuvien ja tekstin käsittely”?

Piirtäkää kuvia ja tyyliteltyä tekstiä canvakselle. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Kuvien ja tekstin käsittely”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy