Kul med javascript/Canvas, grunderna
Canvaselementet är nytt för HTML5 och väldigt efterlängtat. Det innebär att man, med hjälp av script, kan rita direkt i en hemsida.
Det som skapas är egentligen en genomskinlig ruta man kan rita på som är 300 punkter bred och 150 punkter hög om inget annat angetts. Det är inte smart att ändra storleken med hjälp av CSS eftersom det förvränger dimensionerna. Istället skall storleken, om man vill ha en annan, anges i samband med att canvasen skapas.
Här följer ett exempel där en svart kant ritas runt canvasens sidor för att man skall se var den är i sidan. Dessutom ritas en kvadrat upp 10 pixlar in i X och Y led. Färgen bestämmer man själv, endera med hexadecimala tal, rgb värden: rgb(0, 173, 0). eller genom att helt enkelt skriva "green".
Om inte webläsaren har stöd canvas bör man skriva en liten notis mellan canvaselementets taggar.
<!doctype html>
<html lang="en">
<head>
<title>Enkelt canvasexempel</title>
<meta charset="utf-8" />
<style>
canvas { border: 1px solid black; }
</style>
<!- Med css ges alla canvasobjekt på sidan en ram på 1 punkts bredd ->
<script>
window.onload = function() { //När fönstret laddats klart...
var canvas = document.getElementById("enkelCanvas"); //canvas tilldelas
var context = canvas.getContext("2d"); //Vi förklarar att det är 2dimensionellt som gäller
context.fillStyle = "#00cc00"; //Gör så att det vi ritar blir grönt
context.fillRect(10, 10, 100, 100); //Vi skapar en kvadrat med övre vänstra hörnet
// 10 pixlar in i X och Y led och nedre högra hörnet 100 pixlar in i X och Y led.
};
</script>
</head>
<body>
<canvas width="600" height="200" id="enkelCanvas">Du bör uppgradera din webläsare</canvas>
<!- canvasen ritas ut i webläsaren ->
</body>
</html>
Anta att vi vill rita ut en valfri form istället, inte en fylld fyrkant. Då kan du tänka dig att vi har en penna som vi använder. För att göra en triangel t.ex. skriver vi:
context.beginPath(); //förbereder utritning context.moveTo(50, 100); //flyttar x=50 y=100 context.lineTo(150, 0); //flyttar till x=150, y=0 context.lineTo(15, 200); //flyttar till x= 15, y=200 context.closePath(); //Drar pennan till utgångspunkten x=50 och y=100 context.lineWidth = 5; //linjen är 5 pixlar bred context.stroke(); //linjen är kontinuerlig context.fillStyle = "red"; //ytan är röd context.fill(); //Och här fylls ytan
Lägg till texten i slutet av "window.onload" funktionen.