Tegne former og baner
Gjengi rektangler, buer og egendefinerte baner.
Tegne former og baner er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.
Rektangler først
Rektangler har egne snarveier: fillRect, strokeRect og clearRect. Hver av dem tar (x, y, width, height).
ctx.fillStyle = "#2ecc71";
ctx.fillRect(10, 10, 120, 60);
ctx.strokeStyle = "#000";
ctx.strokeRect(10, 10, 120, 60);Starte en bane
For alt annet enn rektangler bygger du en bane. Kall beginPath() for å starte på nytt, legg til segmenter, og kall deretter stroke() eller fill().
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.stroke();moveTo og lineTo
moveTo(x, y) løfter pennen og plasserer den uten å tegne. lineTo(x, y) tegner en rett linje fra gjeldende punkt til det nye punktet.
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(120, 90);
ctx.lineTo(30, 90);
ctx.stroke();Lukke en bane
closePath() tegner en linje tilbake til startpunktet og fullfører omrisset. Det er nyttig for polygoner.
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.stroke();Fylle figurer
fill() fyller innsiden av gjeldende bane med fillStyle. Du kan både fylle og tegne omrisset til den samme banen.
ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(160, 120);
ctx.lineTo(40, 120);
ctx.closePath();
ctx.fillStyle = "gold";
ctx.fill();
ctx.stroke();Tegne sirkler med arc
arc(x, y, radius, startAngle, endAngle) tegner en sirkelbue. Vinkler angis i radianer. En hel sirkel går fra 0 til 2 * Math.PI.
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = "#9b59b6";
ctx.fill();Delvise buer og kakestykker
Bruk en startvinkel og en sluttvinkel for å tegne en sektor. Kombiner med lineTo til sentrum for å lage et kakestykke.
ctx.beginPath();
ctx.moveTo(100, 75);
ctx.arc(100, 75, 50, 0, Math.PI / 2);
ctx.closePath();
ctx.fill();Kvadratiske kurver og Bezier-kurver
quadraticCurveTo(cpx, cpy, x, y) og bezierCurveTo(...) tegner jevne kurver ved hjelp av kontrollpunkter.
ctx.beginPath();
ctx.moveTo(20, 100);
ctx.quadraticCurveTo(100, 10, 180, 100);
ctx.stroke();Linjestil
Kontroller linjenes utseende med lineWidth, lineCap (butt/round/square), lineJoin (miter/round/bevel) og setLineDash.
ctx.lineWidth = 6;
ctx.lineCap = "round";
ctx.setLineDash([12, 6]);
ctx.beginPath();
ctx.moveTo(20, 60);
ctx.lineTo(200, 60);
ctx.stroke();Fyllingsregler
fill() godtar "nonzero" (standard) eller "evenodd" for å bestemme hvordan overlappende delbaner skal fylles – nyttig for figurer med hull.
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.arc(100, 75, 25, 0, Math.PI * 2);
ctx.fill("evenodd"); // donutGradienter som fyll
Opprett en gradient med createLinearGradient, legg til fargestopp, og tilordne den deretter til fillStyle.
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);Kjapp kontroll
Test kunnskapene dine om baner.
Oppsummering: Figurer og baner
Du kan nå tegne rektangler, bygge baner med beginPath/moveTo/lineTo/closePath, tegne sirkler med arc, legge til kurver, angi linjestil og fylle med farger eller gradienter. Deretter skal du lære om bilder og tekst.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 59
- Leksjoner
- 200
Ofte stilte spørsmål
Er leksjonen «Tegne former og baner» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Tegne former og baner», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Tegne former og baner»?
Gjengi rektangler, buer og egendefinerte baner. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med JavaScript Academy?
Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Tegne former og baner»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?
Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Sette opp Canvas-konteksten
- Tegne former og baner
- Arbeide med bilder og tekst
- Animasjon med requestAnimationFrame