JAVASCRIPT/HTML5 CANVAS

Canvas

The canvas element is an environment for creating dynamic images. The real power of canvas is that its contents can be updated at any moment, drawing new content based on the actions of the user. This ability to respond to user-triggered events makes it possible to create tools and games that would have previously required a plug-in technology such as Flash.
(http://html5forwebdesigners.com/media/index.html, 2013)

Är en HTML5-tagg för att rita grafik, interaktivt med hjälp av javascript(vanligast). En canvas är en yta där vi använder färdiga ritfunktioner som streck, rektanglar, cirklar, texter och lägga till bilder.
Ändrar vi någon del i en canvas så måste hela canvas:en ritas om. Det finns även möjligheter att skapa eller ladda in bilder, manipulera och spara dessa.

Canvas start

Skapa en canvas. Id måste vi ha för att komma åt ytan och så en bredd och höjd för bestämma storlek på ytan.

Bredd och höjd anges i html-elementet.

För att rita så måste vi använda javascript


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#99FF99";
ctx.fillRect(0,0,200,50);

Först hämtar vi ett handtag till ytan genom getElementById, sen hämtar vi ett inbyggt HTML5 objekt "getContext("2d")" som innehåller massor av funktioner för att rita 2-dimensionella objekt.
T ex funktionen fillRect som har fyra argument: x från vänster, y uppifrån, width, height
Koordinatsystemet startar uppe i vänstra hörnet, med x-axeln ökande från vänster till höger och y-axeln ökande uppifrån och neråt (y-axeln i motsatt riktning mot vad vi är vana med i matematiken).

Mer Canvas ritverktyg

Linje, rektangel, cirkel, toning, infoga bild och storleksändra bild

De olika delarna ritas upp i den ordning de anges i koden med den sista överst om man ritar flera objekt på samma område ( i samma pixlar på canvas-objektet).

...

ctx.beginPath();
beginPath startar definitionen av en "path", gruppering av ritkommandon som ritas ut tillsammans. För att se den grupperade linjen så används stroke()
användningen separerar olika grupperingar och utritningar

closePath hör inte ihop med beginPath. Det är mer ett till ritkommando som ritar en linje från sist angivna slutpunkt till startpunkten för "grupperingen".

Text, skugga och färgtoning

Här kommer enhel del användbart. För förtydling och fler möjligheter, gå till någon referenssida.

<canvas id="myCanvas4" width="500" height="200"></canvas>
...
<script>
var c2=document.getElementById("myCanvas4");
var ctx4=c2.getContext("2d");
//vanlig text
ctx4.fillStyle = '#000';
ctx4.font = 'normal 30px sans-serif';
ctx4.textBaseline = 'top';
ctx4.fillText ('Webbutveckling 2', 0, 0);
ctx4.font = 'bold 30px sans-serif';
ctx4.strokeText('Webbutveckling 2', 0, 50);
//skugga
ctx4.shadowOffsetX = 5;
ctx4.shadowOffsetY = 5;
ctx4.shadowBlur = 4;
ctx4.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx4.fillStyle = '#f00';
ctx4.fillText ('Webbutveckling 2', 0, 100);
//färgtoning
var gradient1 = ctx4.createLinearGradient(0, 150, 200, 30);
// Första siffran i .addColorStop talar om positionen för färgen, från 0 till 1
// Andra argumentet beskriver färgen
gradient1.addColorStop(0, '#f00'); // röd
gradient1.addColorStop(0.5, '#0f0'); // grön
gradient1.addColorStop(1, '#00f'); // blå
ctx4.fillStyle = gradient1;
ctx4.fillText ('Webbutveckling 2', 0, 150, 300);
</script>

Mer Canvas exempel

Canvas är en av de mest intressanta förbättringarna i HTML5. Det tillhandahåller allt du behöver för enklare spel, utökade användarinteraktivitet. "2D context" API'n innehåller en mängd med fungerande verktyg för att bygga olika intressanta tillämpningar.

effectgames.com
canvasdemos.com

En korrekt kod för Canvasritning

Vi vill ha javascriptkoden sist i vår webbsida.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Demo</title>
</head>
<body><div>
<canvas width="120" height="140" id="myCanvas"></canvas>
</div>

<script src="minjsfil.js"></script>
</body>
</html>

function drawCanvas() {
     var canvas = document.getElementById("myCanvas");
     var ctx = canvas.getContext("2d");
     ctx.strokeStyle = "black";

     var gradient = ctx.createLinearGradient(0, 0, 0, 120);
     gradient.addColorStop(0,"red");
     gradient.addColorStop(1,"white");
     ctx.fillStyle = gradient;
     ctx.fillRect(10,10,100,100);
     ctx.strokeRect(10,10,100,100);
}

//sist i javascriptet laddats in så ropar vi på drawCanvas funktion (då har ju både webbsida och javascripten laddats in)

drawCanvas();

Enkelt att upprepa

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Demo</title>
</head>
<body>

<canvas width="500" height="300" id="myCanvas6"></canvas>

<script src="minjsfil.js"></script>

</body>
</html>

var x=100;
var y=200;
var dx=8;
var dy=5;
var ctx;

function init()
{
ctx = document.getElementById("myCanvas6").getContext("2d");
setInterval(draw,10);
}

function drawBall()
{
     ctx.clearRect(0,0, 500,300);
     ctx.beginPath();
     ctx.fillStyle="#0000ff";
     // Draws a circle of radius 20 at the coordinates 100,200 on the canvas
     ctx.arc(x,y,20,0,Math.PI*2,true);
     ctx.fill();
}

function draw()
{
     drawBall()
     // Studsa när center på bollen träffar kanterna
     if( x<0 || x>500) dx=-dx;
     if( y<0 || y>300) dy=-dy;
     x+=dx;
     y+=dy;
}

/*startar nu allt, om detta ligger sist så kan vi ropa på funktionen direkt men bäst hade varit att koppla in en "load"-lyssnare som startar funktionen när sidan laddat in*/

init();