HTML Academy · Oppitunti

Teksti ja kuvat canvasilla

Renderöi merkkijonoja ja piirrä kuvia canvasille

Oppitunti 3/413 vaihetta

Teksti ja kuvat canvasilla on ilmainen HTML 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 HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Tekstin piirtäminen

Asettakaa fontti: ctx.font = "bold 24px sans-serif". Piirtäkää teksti: ctx.fillText("Hello", x, y) tai ctx.strokeText("Hello", x, y). Y-koordinaatti on tekstin peruslinja — sijoittakaa teksti oikein rajauslaatikkoon huomioimalla sen yläpuolelle jäävä nousukorkeus.

Tekstin tasaus

ctx.textAlign määrittää vaakasuuntaisen tasauksen: "left" (oletus), "center", "right". ctx.textBaseline määrittää pystysuuntaisen tasauksen y-koordinaattiin nähden: "top", "middle", "alphabetic" (oletus), "bottom". Keskitettyä tekstiä varten asettakaa arvoiksi "center" ja "middle".

measureText asettelua varten

ctx.measureText("text") palauttaa TextMetrics-olion, joka sisältää tekstin leveyden ja fontin mittatietoja. Käyttäkää sitä tekstin sijaintien laskemiseen dynaamisesti — voitte keskittää tekstin laatikkoon, rivittää tekstin enimmäisleveyden kohdalla tai tasata otsikot oikealle datapisteiden viereen.

Tekstin rivitys

Canvasissa ei ole sisäänrakennettua tekstin rivitystä. Toteuttakaa se mittaamalla sanojen leveydet ja lisäämällä niitä peräkkäin, kunnes enimmäisleveys ylittyy, minkä jälkeen aloittakaa uusi rivi lineHeight-välein. Tämä on yleinen apufunktio canvas-renderöintikirjastoissa.

Kuvien piirtäminen

ctx.drawImage(image, dx, dy) piirtää HTMLImageElement-, HTMLCanvasElement- tai HTMLVideoElement-olion kohtaan (dx, dy). Ladatkaa kuva ensin ja piirtäkää se sen onload-käsittelijässä, jotta pikselit ovat varmasti käytettävissä ennen piirtämistä.

const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "photo.jpg";

Kuvien skaalaus

ctx.drawImage(image, dx, dy, dw, dh) skaalaa kuvan sopimaan kokoon dw x dh. Kuvasuhdetta ei säilytetä automaattisesti — laskekaa mitat manuaalisesti. Säilyttäkää kuvasuhde seuraavasti: dw = img.width * scale; dh = img.height * scale.

Kuvien rajaaminen

Yhdeksän argumentin drawImage: ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh). Lähdesuorakulmio (sx, sy, sw, sh) rajaa alueen kuvasta; kohdesuorakulmio (dx, dy, dw, dh) sijoittaa ja skaalaa rajatun alueen canvasille.

Kuvien pehmennys

ctx.imageSmoothingEnabled = false poistaa bilineaarisen interpoloinnin käytöstä kuvia skaalattaessa. Käyttäkää sitä pikseligrafiikassa, kun haluatte säilyttää terävän ja pehmentämättömän skaalauksen. Jättäkää ominaisuus käyttöön (oletus) valokuvissa, joissa pehmeä skaalaus näyttää paremmalta.

Canvas kuvien lähteenä

Välittäkää canvas drawImage-metodille lähteeksi, jolloin yksi canvas renderöidään toisen päälle. Näin voitte renderöidä monimutkaiset yhdistelmäkuvat näkymättömälle canvasille ja piirtää kyseisen canvasin näkyvälle canvasille yhtenä operaationa jokaisella ruudulla.

globalAlpha ja yhdistäminen

ctx.globalAlpha (0–1) määrittää yhtenäisen läpinäkyvyyden kaikille sen jälkeen tehtäville piirroille. ctx.globalCompositeOperation määrittää, miten uudet piirrot yhdistyvät olemassa oleviin pikseleihin: "source-over" (oletus), "multiply", "screen", "destination-out" (pyyhintä) ja muut vaihtoehdot.

toDataURL vientiä varten

canvas.toDataURL("image/png") vie canvaksen base64-koodattuna PNG-datan URL-osoitteena. Käyttäkää sitä käyttäjän käynnistämään lataukseen: luokaa ankkurielementti, asettakaa sen href-arvoksi datan URL-osoite ja download-attribuutin arvoksi tiedostonimi ja napsauttakaa sitä ohjelmallisesti.

Tietotesti

Mihin ctx.textBaseline = "middle" vaikuttaa tekstiä piirrettäessä?

Vastaa interaktiivisessa oppitunnissa

Yhteenveto

Canvasin tekstin renderöinnissä käytetään ctx.font-, fillText- ja strokeText-metodeja sekä textAlign- ja textBaseline-ominaisuuksia tekstin sijoittamiseen ja measureText-metodia asettelulaskelmiin. Kuvien piirtäminen drawImage-metodilla tukee skaalausta ja rajaamista; globalAlpha ja globalCompositeOperation hallitsevat yhdistämistä. toDataURL vie canvaksen ladattavaksi tai muuhun käyttöön.

Aloita maksutta

Opi HTML 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: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Teksti ja kuvat canvasilla” ilmainen?

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

Mitä opin oppitunnilla ”Teksti ja kuvat canvasilla”?

Renderöi merkkijonoja ja piirrä kuvia canvasille Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin HTML 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 ”Teksti ja kuvat canvasilla”-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ä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML 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: HTML Academy