Centralt innehåll

• Bilder, ljud, video och två- eller tredimensionell interaktiv grafik för webbapplikationer.
• Fördjupning i märkspråk där det huvudsakliga innehållet är standarderna för HTML och CSS med särskilt fokus på responsiv design.


• Webben som plattform för applikationer av olika slag.
• Skriptspråk för webbutveckling på klientsidan och dokumentobjektsmodell.
• Riktlinjer för god praxis inom webbutveckling.
• Uppnående av interoperabilitet genom att följa standarder och testa på olika plattformar.
• Kvalitetssäkring av applikationens funktion och validering av kodens kvalitet.
• Terminologi inom området webbutveckling.

Fakta

Canvas

Canvas, är en slags rityta (målarduk) i 2D som man använder JavaScript för att rita på. Canvas ingår i HTML5.
Elementet <canvas> används för att skapa en rektangulär rityta i ett HTML-dokument.
Det finns flera olika metoder för att rita figurer på en canvas.

Exempel på elementet <canvas> i HTML

<canvas id="myCanvas" width="200" height="100"></canvas>

Elementet <canvas> måste ha ett id, så att den kan hämtas från JavaScript (med document.getElementById).
width och height attributen talar om storleken på ritytan (canvas).

Exempel på att rita en fylld rektangel i <canvas> elementet med JavaScript

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
</script>

Mer om att rita en fylld rektangel

Exempel på att rita en linje i <canvas> elementet med JavaScript

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
	
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
</script>

Mer om att rita en linje

Exempel på att rita en cirkel i <canvas> elementet med JavaScript

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
	
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();				
</script>

Mer om att rita en cirkel

Exempel på att rita en text i <canvas> elementet med JavaScript

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
	
    ctx.font = "30px Arial";
    ctx.fillText("Hello World",10,50);	
</script>			

Mer om att rita en text

Exempel på att rita en bild i <canvas> elementet med JavaScript

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
	
    var img = document.getElementById("scream");
    ctx.drawImage(img, 10, 10);
</script>			

Mer om att rita en bild

Jämförelse Canvas och SVG

Mer jämförelser mellan Canvas och SVG

Begrepp

2D: Ritning i 2-dimensioner, platt bild utan djup.

Canvas: JavaScript baserat format för att rita i 2D.

Rastergrafik: Pixlar som tillsammans beskriver en bild.

Vektorgrafik: Start och slutpositioner för punkter, linjer, cirklar och dylikt, som tillsammans beskriver en bild.

Länkar

Presentationen

w3schools: Canvas tutorial

w3schools: Canvas referens

Fördjupning

MDN: 2D breakout game using pure JavaScript & Canvas

w3schools: Spel med Canvas & Objektorienterad JavaScript

Övningar

Inlämningsuppgift

login     logout    

Exit tickets

Bouncing Ball

En boll som studsar mot webbläsarens alla kanter.
Skriv bra kommentarer till hela koden (se presentationen).

Extra: Få två bollar att studsa mot kanterna.