CANVAS

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:



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 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:


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":



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



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.

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:

CANVAS	SVG
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

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

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

Metode	Beskrivelse
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

Egenskab	Beskrivelse
lineCap	Syntax: context.lineCap=butt|round|square; Specificerer eller returnerer den anvendte style til linjens end caps.
lineJoin	Syntax: context.lineJoin=bevel|round|miter; Specificerer eller returnerer typen af hjørne, når to linjer mødes.
lineWidth	Syntax: context.lineWidth=number; Specificerer eller returnerer den anvendte linjebredde i pixels.
miterLimit	Syntax: 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

Metode	Beskrivelse
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

Metode	Beskrivelse
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

Metode	Beskrivelse
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

Egenskab	Beskrivelse
font	Syntax: 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.
textAlign	Syntax: context.textAlign=center|end|left|right|start; Specificerer eller returnerer den aktuelle udslutning for indholdet af tekst.
textBaseline	Syntax: context.textBaseline=alphabetic|top|hanging|middle|ideographic|bottom; Specificerer eller returnerer den aktuelle baseline for teksten, når den tegnes.

Metode	Beskrivelse
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

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

Pixel-manipulation

Egenskab	Beskrivelse
width	Syntax: imgData.width; Returnerer vidden af et ImageData object.
height	Syntax: imgData.height; Returnerer højden af et ImageData object.
data	Syntax: imgData.data; Returnerer et object som indeholder billededata for et specificeret ImageData object.

Metode	Beskrivelse
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

Egenskab	Beskrivelse
globalAlpha	Syntax: 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)
globalCompositeOperation	Syntax: 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

Metode	Beskrivelse
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.