JavaScript Academy · Oppitunti

Muotojen ja polkujen piirtäminen

Renderöikää suorakulmioita, kaaria ja mukautettuja polkuja.

Oppitunti 2/413 vaihetta

Muotojen ja polkujen piirtäminen on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.

Ensin suorakulmiot

Suorakulmioille on omat oikopolkunsa: fillRect, strokeRect ja clearRect. Jokainen ottaa parametreiksi (x, y, width, height).

ctx.fillStyle = "#2ecc71";
ctx.fillRect(10, 10, 120, 60);
ctx.strokeStyle = "#000";
ctx.strokeRect(10, 10, 120, 60);

Polun aloittaminen

Kaikki muut kuin suorakulmiot rakennetaan polkuna. Aloittakaa puhtaalta pöydältä kutsumalla beginPath()-metodia, lisätkää segmentit ja kutsukaa lopuksi stroke()- tai fill()-metodia.

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.stroke();

moveTo ja lineTo

moveTo(x, y) nostaa kynän ja siirtää sen uuteen kohtaan piirtämättä. lineTo(x, y) piirtää suoran viivan nykyisestä pisteestä uuteen pisteeseen.

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(120, 90);
ctx.lineTo(30, 90);
ctx.stroke();

Polun sulkeminen

closePath() piirtää viivan takaisin aloituspisteeseen ja viimeistelee ääriviivan. Se on hyödyllinen monikulmioiden piirtämisessä.

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.stroke();

Muotojen täyttäminen

fill() täyttää nykyisen polun sisäosan fillStyle-tyylillä. Saman polun voi sekä täyttää että piirtää ääriviivana.

ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(160, 120);
ctx.lineTo(40, 120);
ctx.closePath();
ctx.fillStyle = "gold";
ctx.fill();
ctx.stroke();

Ympyröiden piirtäminen arc-metodilla

arc(x, y, radius, startAngle, endAngle) piirtää ympyrän kaaren. Kulmat ilmoitetaan radiaaneina. Täysi ympyrä ulottuu arvosta 0 arvoon 2 * Math.PI.

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = "#9b59b6";
ctx.fill();

Osittaiset kaaret ja piirakkasektorit

Kiilan piirtämiseen käytetään alku- ja loppukulmaa. Yhdistäkää tämä lineTo-kutsuun keskelle piirtääksenne piirakkasektorin.

ctx.beginPath();
ctx.moveTo(100, 75);
ctx.arc(100, 75, 50, 0, Math.PI / 2);
ctx.closePath();
ctx.fill();

Toisen asteen ja Bezier-käyrät

quadraticCurveTo(cpx, cpy, x, y) ja bezierCurveTo(...) piirtävät tasaisia käyriä ohjauspisteiden avulla.

ctx.beginPath();
ctx.moveTo(20, 100);
ctx.quadraticCurveTo(100, 10, 180, 100);
ctx.stroke();

Viivojen tyylittely

Viivan ulkoasua hallitaan ominaisuuksilla lineWidth, lineCap (butt/round/square), lineJoin (miter/round/bevel) ja setLineDash.

ctx.lineWidth = 6;
ctx.lineCap = "round";
ctx.setLineDash([12, 6]);
ctx.beginPath();
ctx.moveTo(20, 60);
ctx.lineTo(200, 60);
ctx.stroke();

Täyttösäännöt

fill() hyväksyy arvon "nonzero" (oletus) tai "evenodd" ja määrittää niiden avulla, miten päällekkäiset alireitit täytetään — tämä on hyödyllistä reikiä sisältävissä muodoissa.

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.arc(100, 75, 25, 0, Math.PI * 2);
ctx.fill("evenodd"); // donut

Liukuvärit täyttöinä

Liukuväri luodaan createLinearGradient-metodilla, siihen lisätään väripysähdyksiä ja se määritetään sitten fillStyle-tyylin arvoksi.

const g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, "red");
g.addColorStop(1, "blue");
ctx.fillStyle = g;
ctx.fillRect(0, 0, 200, 100);

Pikatesti

Testatkaa, miten hyvin tunnette polut.

Vastaa interaktiivisessa oppitunnissa

Kertaus: Muodot ja polut

Osaatte nyt piirtää suorakulmioita, rakentaa polkuja metodeilla beginPath/moveTo/lineTo/closePath, piirtää ympyröitä arc-metodilla, lisätä käyriä, tyylitellä viivoja sekä täyttää alueita väreillä tai liukuväreillä. Seuraavaksi käsitellään kuvia ja tekstiä.

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 ”Muotojen ja polkujen piirtäminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Muotojen ja polkujen piirtäminen”. 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 ”Muotojen ja polkujen piirtäminen”?

Renderöikää suorakulmioita, kaaria ja mukautettuja polkuja. 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 2/4.

Kuinka kauan ”Muotojen ja polkujen piirtäminen”-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