Rita former och banor
Rendera rektanglar, bågar och anpassade banor.
Rita former och banor är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Rektanglar först
Rektanglar har särskilda genvägar: fillRect, strokeRect och clearRect. Alla tar (x, y, width, height).
ctx.fillStyle = "#2ecc71";
ctx.fillRect(10, 10, 120, 60);
ctx.strokeStyle = "#000";
ctx.strokeRect(10, 10, 120, 60);Börja en bana
För allt annat än rektanglar bygger du en path. Anropa beginPath() för att börja om, lägg till segment och anropa sedan stroke() eller fill().
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.stroke();moveTo och lineTo
moveTo(x, y) lyfter pennan och placerar den utan att rita. lineTo(x, y) ritar en rak linje från den aktuella punkten till den nya.
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(120, 90);
ctx.lineTo(30, 90);
ctx.stroke();Stänga en bana
closePath() ritar en linje tillbaka till startpunkten och slutför konturen. Det är användbart för polygoner.
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.stroke();Fylla former
fill() målar insidan av den aktuella banan med fillStyle. Du kan både fylla och rita konturen av samma bana.
ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(160, 120);
ctx.lineTo(40, 120);
ctx.closePath();
ctx.fillStyle = "gold";
ctx.fill();
ctx.stroke();Rita cirklar med arc
arc(x, y, radius, startAngle, endAngle) ritar en cirkelbåge. Vinklar anges i radianer. En hel cirkel går från 0 till 2 * Math.PI.
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = "#9b59b6";
ctx.fill();Delbågar och tårtbitar
Använd en start- och slutvinkel för att rita en sektor. Kombinera med lineTo till centrum för att skapa en tårtbit.
ctx.beginPath();
ctx.moveTo(100, 75);
ctx.arc(100, 75, 50, 0, Math.PI / 2);
ctx.closePath();
ctx.fill();Kvadratiska Bézierkurvor och Bézierkurvor
quadraticCurveTo(cpx, cpy, x, y) och bezierCurveTo(...) ritar mjuka kurvor med hjälp av kontrollpunkter.
ctx.beginPath();
ctx.moveTo(20, 100);
ctx.quadraticCurveTo(100, 10, 180, 100);
ctx.stroke();Linjestil
Styr linjernas utseende med lineWidth, lineCap (butt/round/square), lineJoin (miter/round/bevel) och setLineDash.
ctx.lineWidth = 6;
ctx.lineCap = "round";
ctx.setLineDash([12, 6]);
ctx.beginPath();
ctx.moveTo(20, 60);
ctx.lineTo(200, 60);
ctx.stroke();Fyllningsregler
fill() accepterar "nonzero" (standard) eller "evenodd" för att avgöra hur överlappande delbanor ska fyllas — praktiskt för former med hål.
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 fyllningar
Skapa en gradient med createLinearGradient, lägg till färgstopp och tilldela den sedan till 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);Snabbtest
Testa dina kunskaper om banor.
Sammanfattning: Former och banor
Du kan nu rita rektanglar, bygga banor med beginPath/moveTo/lineTo/closePath, rita cirklar med arc, lägga till kurvor, utforma linjer och fylla med färger eller gradienter. Härnäst: bilder och text.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”Rita former och banor” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Rita former och banor”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Rita former och banor”?
Rendera rektanglar, bågar och anpassade banor. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Rita former och banor”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?
Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Konfigurera Canvas-kontexten
- Rita former och banor
- Arbeta med bilder och text
- Animering med requestAnimationFrame