JAVASCRIPT Bibliotek
Bibliotek
Är helt enkelt en javascript-fil där vi samlar egna funktioner framför allt. Vi kan även samla initiering av variabler där..
Bygg ett eget bibliotek
Vi har sett tidigare när vi vill rita på en canvas så måste vi oftast skriva ett antal kommandorader för att fullborda ritningen av ett objekt. Vi kan skapa ett antal funktioner för uppritining av olika objekt. Funktionerna tar emot några parametrar och utför sen flera kommandorader. Givetvis begränsar vi oss en aning genom att dessa funktioner kan inte rita precis allt som går men vårt mål är att de kan rita de objekt vi vill kunna rita. Saknar vi sen någor så är det bara att lägga till nya funktioner i javascript-filen.
Vi skapar följande javascript-fil (myLibrary1.js) med ett antal förenklade ritfunktioner.
// JavaScript Document
function rectangle(ctx, x, y, width, height, color)
{
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
}
function circle(ctx, x, y, r, color, lineWidth, lineColor)
{
ctx.beginPath();
ctx.fillStyle = color;
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.fill();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = lineColor;
ctx.stroke();
}
function triangle(ctx, x1, y1, x2, y2, x3, y3, color)
{
ctx.fillStyle = color;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.fill();
}
function line(ctx, x1, y1, x2, y2, width, color)
{
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
function writeText(ctx, x, y, color, size, text)
{
ctx.fillStyle = color;
ctx.font = 'bold ' + size + "px Arial";
ctx.textBaseline = 'top';
ctx.fillText(text, x, y);
}
För att rita så måste vi använda funktionerna i javascript. En hel testfil skulle kunna se ut så här:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Namnlöst dokument</title>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500px" height="500px"></canvas>
<script src="myLibrary1.js"></script>
<script src="minjsfil.js"></script>
</body>
</html>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
rectangle(ctx, 0, 0, 500, 400, "blue");
rectangle(ctx, 0, 400, 500, 100, "green");
rectangle(ctx, 100, 200, 300, 300, "#ff0000");
triangle(ctx, 100,200,400,200,250,100, "black");
rectangle(ctx, 220, 400, 60, 100, "black");
rectangle(ctx, 140, 250, 60, 80, "white");
rectangle(ctx, 300, 250, 60, 80, "white");
circle(ctx, 350, 30, 30, "white",0,"white");
circle(ctx, 350, 80, 20, "white",0,"white");
circle(ctx, 350, 120, 10, "white",0,"white");
rectangle(ctx, 330, 130, 40, 50, "black");
line(ctx, 140, 290, 200, 290, 5, "black");
line(ctx, 300, 290, 360, 290, 5, "black");
line(ctx, 170, 250, 170, 330, 5, "black");
line(ctx, 330, 250, 330, 330, 5, "black");
writeText(ctx, 450, 470, "#ff9900", 20,"Per");
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.
Variabeln ctx är den som våra funktioner i biblioteksfilen utnyttjar så den får vi inte byta namn på som det är uppbyggt i just detta fall.
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).
Enkelt att rita många ritobjekt
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).