CANVAS





Hvad går det ud på?

CANVAS er en måde at lave grafik på, via JavaScript, i HTML 5. Man specificerer et felt med CANVAS-tag'en, hvori man indsætter det man har tegnet ved JavaScriptets kørsel. Det er helt analogt til det at bruge et JavaScript til at skrive i et felt, som gennemgået her.

Man kan kombinere CANVAS med andre billeder, så man har et underliggende billede, som f.eks. af HTML-Hajen, og f.eks. en lille cirkel, til at markere et eller andet:

Din browser understøtter ikke HTML5 CANVAS-tag'en.


Der findes programmer der kan konvertere billeder i f.eks. jpg til CANVAS, men i praksis er det en skidt idé. Haj-logoet på denne side fylder f.eks. 39709 linjer kode.


CANVAS-tag'en

CANVAS-tag'en som bruges til grafikken er egentlig blot en container som man kender det fra frames, dvs. man kan bestemme størrelse, baggrundsfarve, rammer, osv. Det man tegner specificerer man med et JavaScript efter containeren, f.eks. en cirkel:

<CANVAS ID="CirkelCanvas" WIDTH="150" HEIGHT="150" STYLE="border:1px solid #000000">
</CANVAS>

<SCRIPT>
window.onload = function() {
var canvas = document.getElementById("CirkelCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(75,75,30,0,2*Math.PI);
ctx.strokeStyle = "green";
ctx.lineWidth = 3;
ctx.stroke();
};
</SCRIPT>

Hvilket ser således ud på skærmen:



Et af de steder hvor man kan komme galt afsted med CANVAS er specifikationen af billedets størrelse. Normalt anbefales at man specificerer størrelsen med STYLE i stedet for attributterne HEIGHT og WIDTH, men her giver det to meget forskellige resultater. Hvis vi ser på logoet fra før, så ser resultatet således ud med STYLE="width:164px; height:150px":

Din browser understøtter ikke HTML5 CANVAS-tag'en.


mens det ser således ud ved at bruge attributterne WIDTH="164" HEIGHT="150":

Din browser understøtter ikke HTML5 CANVAS-tag'en.


Så, hvis det billede du får ved at anvende CANVAS opfører sig underligt, kunne det være en uregelmæssighed som denne du oplever.


Forskellen på CANVAS og SVG

Man arbejder med 2 muligheder mht. grafik på hjemmesider, SVG og CANVAS. Der er tale om 2 forskellige måder at arbejde med grafik på, hver med sine fordele og ulemper. Så, hvis man skal til at rode med grafik, kan man ved fordel lige overveje hvad der er mest hensigtsmæssigt til projektet. De væsentligste forskelle er:

CANVASSVG
  • Afhængig af opløsning
  • Understøtter ikke event handlers
  • Dårlig gengivelse af tekst
  • Det resulterende billede kan gemmes som .png eller .jpg
  • Velegnet til grafiktunge spil
  • Uafhængig af opløsning
  • Understøtter event handlers
  • Bedst egnet til applikationer med store områder der skal gengives (f.eks. kort)
  • Langsom til gengivelse hvis billedet er komplekst (alt der anvender DOM (Document Object Model) meget, vil være langsomt)
  • Ikke egnet til spilapplikationer



Egenskaber og metoder til CANVAS

Hvis man nu skulle have lyst til at lave noget kodning med CANVAS, er her navnene på nogle af de koder for egenskaber og metoder man kan anvende:


Farver, styles og skygger

EgenskabBeskrivelse
fillStyleSyntax: context.fillStyle=color|gradient|pattern;
Specificerer eller returnerer farve, gradient eller mønster anvendt til tegningen.
strokeStyleSyntax: context.strokeStyle=color|gradient|pattern;
Specificerer eller returnerer farve, gradient eller mønster anvendt til strokes (linje).
shadowColorSyntax: context.shadowColor=color;
Specificerer eller returnerer farven der er anvendt til skygger.
shadowBlurSyntax: context.shadowBlur=number;
Specificerer eller returnerer niveauet af blur (transparens) for skygger.
shadowOffsetXSyntax: context.shadowOffsetX=number;
Specificerer eller returnerer den horisontale afstand/bredde af skyggen fra genstanden, i pixels.
shadowOffsetYSyntax: context.shadowOffsetY=number;
Specificerer eller returnerer den vertikale afstand/bredde af skyggen fra genstanden, i pixels.


MetodeBeskrivelse
createLinearGradient()Syntax: context.createLinearGradient=(x0,y0,x1,y1);
Skaber en lineær gradient (til anvendelse på indholdet i canvas). x0,y0,x1,y1 er start- og slutpunkterne for gradienten, i pixels.
createPattern()Syntax: context.createPattern=(image,"repeat|repeat-x|repeat-y|no-repeat");
Gentager et specificeret element i den specificerede retning.
createRadialGradient()Syntax: context.createRadialGradient=(x0,y0,r0,x1,y1,r1);
Skaber en radial/cirkulær gradient (til brug på indholdet i canvas).
addColorStop()Syntax: context.addColorStop=(stop,color);
Specificerer farverne og stoppositionerne i et gradient-objekt. stop er en værdi mellem 0.0 og 1.0.


Linje-styles

EgenskabBeskrivelse
lineCapSyntax: context.lineCap=butt|round|square;
Specificerer eller returnerer den anvendte style til linjens end caps.
lineJoinSyntax: context.lineJoin=bevel|round|miter;
Specificerer eller returnerer typen af hjørne, når to linjer mødes.
lineWidthSyntax: context.lineWidth=number;
Specificerer eller returnerer den anvendte linjebredde i pixels.
miterLimitSyntax: context.miterLimit=number;
Specificerer eller returnerer den maksimale geringslængde. Bemærk, at hvis geringen er længere en den specificerede maksimumslængde, bliver lineJoin vist som affasning (bevel).


Rektangler

MetodeBeskrivelse
rect()Syntax: context.rect=(x,y,width,height);
Danner en rektangel. Alle værdier er i pixels.
fillRect()Syntax: context.fillRect=(x,y,width,height);
Danner en udfyldt rektangel. Alle værdier er i pixels.
strokeRect()Syntax: context.strokeRect=(x,y,width,height);
Danner en rektangel (ufyldt). Alle værdier er i pixels.
clearRect()Syntax: context.clearRect=(x,y,width,height);
Fjerner de specificerede pixels i en given rektangel, dvs. en hvid rektangel i den ydre rektangel. Alle værdier er i pixels.


Paths

MetodeBeskrivelse
fill()Syntax: context.fill=();
Udfylder den aktuelle tegning (path) i henhold til de specificerede parametre f.eks. fillStyle().
stroke()Syntax: context.stroke=();
Den faktiske tegning af den definerede path, f.eks. ved anvendelse af lineTo() og moveTo(). beginPath=() starter beskrivelsen og stroke=() afslutter beskrivelsen.
beginPath()Syntax: context.beginPath=();
Påbegynder en path, eller genplacerer den igangværende path der er defineret, f.eks. ved at anvende lineTo() og moveTo(). beginPath=() starter beskrivelsen og stroke=() afslutter beskrivelsen.
moveTo()Syntax: context.moveTo=(x,y);
Flytter path til det specificerede punkt på canvas'et, uden at lave en linje. Koordinaterne er i pixels.
closePath()Syntax: context.closePath=();
Danner en path fra det aktuelle punkt tilbage til startpunktet.
lineTo()Syntax: context.lineTo=(x,y);
Tilføjer et nyt punkt og danner en linje til dette punkt fra det sidst specificerede punkt på canvas'et.
clip()Syntax: context.clip=();
Klipper en region af en hver form og størrelse ud af det oprindelige canvas.
quadraticCurveTo()Syntax: context.quadraticCurveTo=(cpx,cpy,x,y);
Danner en kvadratisk Bézier-kurve. Koordinaterne er i pixels.
bezierCurveTo()Syntax: context.bezierCurveTo=(cp1x,cp1y,cp2x,cp2y,x,y);
Danner en kubisk Bézier-kurve. Koordinaterne er i pixels.
arc()Syntax: context.arc=(x,y,r,sAngle,eAngle,counterclockwise);
Danner en bue/kurve (dvs. cirkler eller dele af cirkler).
arcTo()Syntax: context.arcTo=(x1,y1,x2,y2,r);
Danner en bue/kurve mellen to tangenter.
isPointInPath()Syntax: context.isPointInPath=(x,y);
Tester for hvorvidt det specificerede koordinat ligger på den specificerede path.


Transformationer

MetodeBeskrivelse
scale()Syntax: context.scale=(scalewidth,scaleheight);
Skalerer den aktuelle tegning, både større og mindre.
rotate()Syntax: context.rotate=(angle);
Roterer den aktuelle tegning.
translate()Syntax: context.translate=(x,y);
Forskyder (0,0)-positionen på canvas'et til (x,y)-koordinaterne. Koordinaterne er i pixels.
transform()Syntax: context.transform=(a,b,c,d,e,f);
Udskifter den aktuelle transformations-matrice for tegningen.
setTransform()Syntax: context.setTransform=(a,b,c,d,e,f);
Indstiller den aktuelle transform til identity-matricen. Herefter køres transform().


Tekst

EgenskabBeskrivelse
fontSyntax: context.font=font-style| font-variant| font-weight| font-size/line-height| font-family| caption| icon| menu| message-box| small-caption| status-bar;
Specificerer eller returnerer de aktuelle egenskaber for fonten for indholdet af tekst.
textAlignSyntax: context.textAlign=center|end|left|right|start;
Specificerer eller returnerer den aktuelle udslutning for indholdet af tekst.
textBaselineSyntax: context.textBaseline=alphabetic|top|hanging|middle|ideographic|bottom;
Specificerer eller returnerer den aktuelle baseline for teksten, når den tegnes.


MetodeBeskrivelse
fillText()Syntax: context.fillText=(text,x,y,maxWidth);
Tegner "udfyldt" tekst, dvs. ikke outlined tekst, på canvas'et.
strokeText()Syntax: context.strokeText=(text,x,y,maxWidth);
Tegner outlined tekst på canvas'et.
measureText()Syntax: context.measureText=(text).width;
Returnerer et objekt, der indeholder vidden af den specificerede tekst.


Tegning af billeder

MetodeBeskrivelse
drawImage()Syntax: context.drawImage=(img,sx,sy,swidth,sheight,x,y,width,height);
Tegner et billede, canvas eller video på canvas'et.


Pixel-manipulation

EgenskabBeskrivelse
widthSyntax: imgData.width;
Returnerer vidden af et ImageData object.
heightSyntax: imgData.height;
Returnerer højden af et ImageData object.
dataSyntax: imgData.data;
Returnerer et object som indeholder billededata for et specificeret ImageData object.


MetodeBeskrivelse
createImageData()Syntax: context.createImageData=(width,height) or context.createImageData=(imageData);
Danner et nyt, blankt ImageData object.
getImageData()Syntax: context.getImageData=(x,y,width,height);
Returnerer et ImageData object som kopierer pixel data for det specificerede rektangel på et canvas.
putImageData()Syntax: context.putImageData=(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
Sætter billeddata (fra et specificeret ImageData object) tilbage på canvas'et.


Sammensætning
EgenskabBeskrivelse
globalAlphaSyntax: context.globalAlpha=number;
Specificerer eller returnerer den aktuelle alpha eller transparency value for tegningen. Transparency value skal være et tal mellem 0.0 (helt transparent) og 1.0 (ingen transparans)
globalCompositeOperationSyntax: context.globalCompositeOperation=source-over| source-atop| source-in| source-out| destination-over| destination-atop| destination-in| destination-out| lighter| copy| xor;
Specificerer eller returnerer hvordan et nyt billede tegnes ovenpå et eksisterende billede.


Andet
MetodeBeskrivelse
save()Syntax: context.save();
Gemmer indstillingerne for den pågældende context.
restore()Syntax: context.restore();
Returnerer tidligere gemte path state og attributter.
createEvent()Syntax: context.createEvent=(type);
Danner en event af den specificerede type. Bemærk venligst, at mange metoder anvendt med createEvent er afviklet. Brug event constructors i stedet.
getContext()Syntax: context.getContext=(2d|webgl|webgl2|bitmaprenderer, contextAttributes);
Returnerer et drawing context på canvas'et, eller null hvis context identifier'en ikke understøttes.
toDataURL()Syntax: context.toDataURL=(type, encoderOptions);
Returnerer et data URI, som indeholder en representation af billedet i det format der er specificeeret af type-parameteren (PNG er default), dvs. det konverterer CANVAS-billedet til .png eller .jpg, afhængig af specifikationen. Det returnerede billede har en opløsning på 96 dpi.