Javascript - Tutorial

Måla och animera i canvas med JS

På den här sidan kommer vi gå igenom hur man målar enkla geometriska figurer i canvaselementet med hjälp av javascript. Sedan kommer vi skapa sammansatta figurer med hjälp av objekt. Slutligen kommer vi gå igenom hur man flyttar figurerna över canvasen.

Vad din html-fil bör innehålla:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <canvas id="myCanvas"></canvas> <script src="paintoncanvas.js"></script> </body> </html>

Om du använder den här html-koden så kan du skriva din kod i en annan fil som du sparar som paintoncanvas.js i samma map som html-filen. Du kan även skriva kod direkt i exemplen nedan.

Hämta canvas-referensen och måla en kvadrat

För att måla i canvaselementet med JS kan man anropa metoden getContext('2d'). Den returnerar ett js-object (canvasreferensen) som bland annat låter användaren måla olika geometriska figurer. Det här kodexemplet visar hur man använder canvasreferensen för att måla en kvadrat i en canvas.

Det går ändra i koden nere till vänster.

Testa att avkommentera (= ta bort snedsträcken före koden) de två sista raderna i exemplet. Det går att göra flera rektanglar på samma canvas.

Kolla på koden och fundera på om du kan göra tre rektanglar: en gul, en röd och en orange?

Kod:

   //hämtar canvasen från dokumentet
   let rectcanvas = document.getElementById('rectcanvas');

   //Hämtar canvasreferensen
   let squarereference = rectcanvas.getContext('2d');

   //Den här metoden tar bort canvasens innehåll.
   //Vi pratar mer om den i senare exempel.
   squarereference.clearRect(0,0,300,150);
 
   let xstart = 20, ystart = 20, xsize = 20, ysize = 60;

   //väljer färg:
   squarereference.fillStyle = 'orange';

   //Skapar rektangeln
   squarereference.fillRect(xstart, ystart, xsize, ysize);

   //squarereference.fillStyle = 'red';
   //squarereference.fillRect(100, 50, 50, 50);

Resultat:

Observera att det här kodexemplet förutsätter att det finns ett canvaselement med id: 'rectcanvas' i html-filen.

Det är en bra idé att göra den här biten i vs code så att man ser att den funkar. Testa att byta värden på xstart, ystart, xsize och ysize och kolla vad som händer. Testa även att byta färg (det går bra att använda hexkoder också).

Försök bygga den här snubben:

Måla cirklar, cirkelsektioner och linjer

Det finns flera metoder för att rita linjer och kurvor i canvasreferensen. De metoder som vi kommer använda för att dra linjer i det här exemplet är moveTo, lineTo och arc. För att rita linjer och fylla i figurer kommer vi använda stroke och fill.

Kod:

   //fyrkant
   let circleCanvas = document.getElementById('circleCanvas');
   circlereference = circleCanvas.getContext('2d');
   circlereference.clearRect(0,0,300,150)

   //Startar en ny kurva/linje
   circlereference.beginPath();

   //Sätter ner "pennan" i punkten (20,10)
   circlereference.moveTo(20,10);

   //Drar en linje från den tidigare punkten, (20,10), till (40,30)
   circlereference.lineTo(40,30);

   circlereference.lineTo(20,50);
   circlereference.lineTo(0,30);
   circlereference.lineTo(20,10);

   //Väljer färg för att linjer
   circlereference.strokeStyle = 'green';

   //Målar ut linjerna till figuren
   circlereference.stroke();

   //Halvcirkel
   circlereference.beginPath();

   //Gör en cirkelbåge runt punkten (70,30) med radien 
   circlereference.arc(70,30,20,0,Math.PI/2);
   circlereference.lineTo(70,30);
   circlereference.lineTo(90,30);
   circlereference.fillStyle = 'orange';
   circlereference.fill();

Resultat:

Det är en del nya grejer i det här exemplet så vi får bryta ner det. beginPath låter användaren starta en ny linje/kurva. MoveTo sätter ut en punkt som man ritar från. lineTo drar en linje från punkten man befinner sig i till den punkten som anges i lineTo:s argument. Det är alltså en lämplig metod för att måla figurer med raka linjer.

Metoden stroke används för att måla upp linjerna till figuren medan fill används för att fylla i figuren med färg.

Testa att bygga något sånt här:

Gruppera figurer med hjälp av objekt

När man vill måla upp en figur flera gånger - t.ex när man animerar eller gör spel - så är det smidigt att gruppera figurer med objekt. Detta gör att man t.ex kan ange ett x-, och y-värde till objektet för att måla upp en figur på de koordinaterna. Såhär kan det se ut:

Kod:

dudereference = document.getElementById('dudecanvas').getContext('2d');
dudereference.clearRect(0,0,300,150);

function Dude(x, y){
    this.x = x;
    this.y = y;
    this.width = 20;
    this.height = 60;
    this.draw = function(){
        dudereference.fillStyle = 'pink';
        dudereference.beginPath();
        dudereference.arc(this.x+this.width/2, this.y+this.height/8, this.height/8, 0, 2*Math.PI);
        dudereference.fill();
        dudereference.fillRect(this.x, this.y+this.height/4, this.width, this.height/2);
        dudereference.fillRect(this.x-this.width/4-1, this.y+this.height/4, this.width/4, this.height/3);
        dudereference.fillRect(this.x+this.width+1, this.y+this.height/4, this.width/4, this.height/3);
        dudereference.fillRect(this.x, this.y+this.height/4*3, this.width/3, this.height/4);
        dudereference.fillRect(this.x+this.width/3*2, this.y+this.height/4*3, this.width/3, this.height/4);
    }
}
let dude = new Dude(20,20);
for(let i=0;i<5;i++){
    dude.draw();
    dude.x += 40;
    dude.y += 20;
}

Resultat:

I koden skapas objektet 'dude' en gång och sedan anropas dess metod 'draw' 5 gånger.

Man kan ge objekt massa olika egenskaper för att måla på olika sätt som t.ex hastighet i x- och y-led, rotationsvinkel på armar och ben, färg och mycket mer. Testa gärna att lägga till en egenskap 'color' för att ändra färg på gubbarna.

Ge objektet i exemplet ett värde för gender för att måla ut figurerna i bilden. En if-sats i draw-metoden är ett tips:p

Uppdatera bilder med hjälp av requestAnimationFrame

I det här exemplet ska vi få en boll att studsa upp och ned. För att uppnå detta skapar vi ett litet objekt: boll. Objektet kommer som i tidigare exempel ha en draw-metod. Vi kommer loopa den metoden samtidigt som vi uppdaterar bollens position för att få det att se ut som att bollen rör sig över canvasen.

Kod:

animationreference = document.getElementById('animationcanvas').getContext('2d');

function Boll(x, y, xv, yv, r, color){
    this.x = x;
    this.y = y;
    this.xv = xv;
    this.yv = yv;
    this.r = r;
    this.color = color;
    this.move = function(){
        this.x += this.xv;
        this.y += this.yv;
        if (this.y>=150-this.r){
            this.y = 150-this.r;
            this.yv = this.yv*(-1); //studsfaktor
        } else {
            this.yv += .1; //gravitationsfaktor
        }
        if (this.x>300-this.r){
            this.x = 300-this.r;
            this.xv*=(-1);
        }
        if (this.x<this.r){
            this.x = this.r;
            this.xv*=(-1);
        }
    }
    this.draw = function(){
        animationreference.beginPath();
        animationreference.arc(this.x, this.y, this.r, 0, 2*Math.PI);
        animationreference.fillStyle = this.color;
        animationreference.fill();
    }
}
let boll = new Boll(20,100,1,0,5,'blue');
animate();

function animate(){
    animationreference.clearRect(0,0,300,200);
    boll.draw();
    boll.move();

    //anropar animate när all kod i animate har körts klart
    currentid = requestAnimationFrame(animate);
}

Resultat:

Objektet boll har två metoder: move och draw. move uppdaterar bollens position och draw målar bollen på canvasen. Det intressanta i det här exemplet är dock requestAnimationFrame och clearRect.

requestAnimationFrame tar en funktion - i det här fallet animate - som argument och kör funktionens innehåll 60 gånger per sekund. Den har ungefär samma användning som setIntervall men visar inte nästa frame förrän all kod är körd.

clearRect suddar ut en yta ur canvasen. Testa gärna att kommentera bort raden med clearRect för att se varför detta är nödvändigt.

Kombinera vad du har lärt dig:p

Frontend Tutorials

Javascript - Tutorial

Måla och animera i canvas med JS

Hämta canvas-referensen och måla en kvadrat

Måla cirklar, cirkelsektioner och linjer

Gruppera figurer med hjälp av objekt

Uppdatera bilder med hjälp av requestAnimationFrame