HTML5: Tegne bilder og legge til tekst i lerretselementet

I forrige innlegg, "HTML5: Arbeid med lerretselementet, " vurderte jeg flere måter å manipulere dette elementet, inkludert å lage rektangler, sirkler, trekanter og diamantformer ved å tegne stier, og med forskjellige nyanser ved å bruke rgba. I dette segmentet skal vi gjennomgå tegning av bilder og leke med å legge til tekst på lerretet.

Canvas drawImage- funksjonen ved hjelp av JavaScript lar deg lage et bildeobjekt innenfor det definerte lerretsområdet . DrawImage- funksjonen inkluderer tre parametere og uttrykkes i formen drawImage (objektbilde, float x, float y) . Bildefilformatene som støttes i lerretselementet og drawImage- funksjonen er .jpg, .gif og .png. For at tegne-bildefunksjonen skal fungere, må vi stille inn variabelen og definere bildeobjektet. For dette eksemplet setter vi det til "img" slik det kommer til uttrykk i var img = new Image (); og deretter tilføres bildekilden, fulgt av bildelasten, og den endelige drawImage- funksjonen med parametrene definert som i eksemplet nedenfor:
 // Tegn bilde-funksjon 
 var img = nytt bilde (); 
 img.src = "bilder / Figur_A.png"; 
 img.onload = funksjon () { 
 context.drawImage (img, 145, 145); 
 }; 

Det resulterende lerretsbildet vises nedenfor som vist i Firefox 3.6:

Figur A

Her vises hele kodebiten:

 function drawCanvas () { 
 var circle_canvas = document.getElementById ("lerret"); 
 var context = circle_canvas.getContext ("2d"); 
 // Fyll stil 
 context.fillStyle = "rgba (93, 179, 199, 0, 20)"; 
 // Begynn bane 
 context.beginPath (); 
 // Lerretsform 
 context.arc (225, 225, 115, 0, Math.PI * 2, true); 
 // Lukk sti 
 context.closePath (); 
 // Fyll form 
 context.fill (); 
 // Tegn bilde-funksjon 
 var img = nytt bilde (); 
 img.src = "bilder / Figur_A.png"; 
 img.onload = funksjon () { 
 context.drawImage (img, 145, 145); 
 }; 
 } 

Eksempler på lerret

Tegn eksempelfunksjon

Vi beklager, nettleseren din støtter ikke lerret på dette tidspunktet!

Legger til tekst

Lerretstekst kan tegnes ved hjelp av font- og tekstattributter sammen med flere tekstmetoder. Fontattributtstrengen har en standardinnstilling på 10px, sans-serif, og kan inkludere alt du normalt vil legge til i en CSS-fontregel. TextAlign attributtstrengen er selvforklarende, og den har en standardverdi for start og støtter verdiene: start, slutt, venstre, høyre eller sentrum. TextBaseline IDL attributtstrengen har en standard for alfabetisk, og støtter verdiene: topp, hengende, midt, alfabetisk, ideografisk eller bunn.

WHATWG spesifiserer tekstBaseline- attributtens nøkkelord som tilsvarer justeringspunktene i skriften, der:
  • toppen tilsvarer toppen av em-kvadratet
  • hengende er den hengende grunnlinjen
  • midten er midten av em-plassen
  • alfabetisk er den alfabetiske grunnlinjen
  • ideografisk er den ideografiske grunnlinjen
  • bunnen tilsvarer bunnen av em-firkanten

Tekstmetodene inkluderer:

  • fillText ( strengtekst, float x, float y, valgfritt float maxWidth)
  • strokeText ( strengtekst, float x, float y, valgfritt float maxWidth)

Metrics-grensesnittet inkluderer measureText ( strengtekst ) og returnerer et TextMetrics- objekt for den gitte teksten i gjeldende skrift, dvs. metrics = context.measureText (strengtekst) .

Et grunnleggende teksteksempel inkluderer kontekst for tykkelsen på strek ved bruk av lineWidth, og fargen på fyllet settes ved bruk av fillStyle som også kan brukes til å etablere gradientinnstillinger; fargen på streken settes ved hjelp av linestilen ; font og fillText vises også nedenfor i JavaScript-koden og HTML-kodebitene.
 function drawCanvas () { 
 var canvas = document.getElementById ("canvasText"); 
 var context = canvas.getContext ('2d'); 
 // Fyll ut tekst 
 context.lineWidth = 1; 
 context.fillStyle = "# CC00FF"; 
 context.lineStyle = "# FFFF00"; 
 context.font = "18px sans-serif"; 
 context.fillText ("Fill Text, 18px, sans-serif", 20, 20); 
 } 

Eksempler på lerretstekst

Vi beklager, nettleseren din støtter ikke lerret på dette tidspunktet!

Skjermdumpen nedenfor viser resultatet av koden ovenfor som vist i Firefox 3.6.

Figur B

Det neste eksemplet viser strokeText ved hjelp av JavaScript-kode med det resulterende skjermbildet nedenfor.

 function drawCanvas () { 
 var canvas = document.getElementById ("canvasText"); 
 var context = canvas.getContext ('2d'); 
 // Stroketekst 
 context.font = "22px verdana"; 
 context.strokeText ("Stroke Text, 22px, veranda", 20, 50); 
 } 

Figur C

Fontavspilling i dette eksemplet viser legging av kursiv, 26px og tider til skriften:

 function drawCanvas () { 
 var canvas = document.getElementById ("canvasText"); 
 var context = canvas.getContext ('2d'); 
 // Italic Stroke Text 
 context.font = "kursiv 26px Times"; 
 context.strokeText ("Kursiv, strek, tekst, 26px, ganger", 20, 85); 
 } 

Figur D

Fyll strektekst , i dette eksemplet, demonstrerer kontekst for både fillText og strokeText, noe som betyr at teksten må tegnes to ganger med de samme x- og y-koordinatene, som vist i JavaScript-kodebiten og medfølgende skjermbilde:
 function drawCanvas () { 
 var canvas = document.getElementById ("canvasText"); 
 var context = canvas.getContext ('2d'); 
 // Fyll strek tekst 
 context.lineWidth = 2; 
 context.strokeStyle = "rgba (35, 70, 237, .8)"; 
 context.font = "28pt sans-serif"; 
 context.fillText ("Fill, Stroke Text, 28pt, sans-serif", 20, 130); 
 context.strokeText ("Fill, Stroke Text, 28pt, sans-serif", 20, 130); 
 } 

Figur E

Skyggeteksteffekter kan gjengis i lerret ved å bruke kontekst for shadowOffsetX, shadowOffsetY og shadowColor som vist i eksempelutdraget og det medfølgende skjermbildet:

 function drawCanvas () { 
 var canvas = document.getElementById ("canvasText"); 
 var context = canvas.getContext ('2d'); 
 // Skygge fet tekst 
 context.lineWidth = 1; 
 context.fillStyle = "# 0000FF"; 
 context.strokeStyle = "# 880000"; 
 context.font = "fet 28pt sans-serif"; 
 context.shadowOffsetX = 2; 
 context.shadowOffsetY = -2; 
 context.shadowColor = "# 888888"; 
 context.fillText ("Shadow, Bold Text, 28pt, sans-serif", 20, 180); 
 } 

Figur F

Uklarhet legges til med kontekstskyggenBlur; JavaScript-kodebiten og det resulterende skjermbildet er nedenfor:

 function drawCanvas () { 
 var canvas = document.getElementById ("canvasText"); 
 var context = canvas.getContext ('2d'); 
 // Shadow Blur Stroke Fet tekst 
 context.fillStyle = "# 5CADE9"; 
 context.lineStyle = "# 5CADE9"; 
 context.font = "fet 28pt sans-serif"; 
 context.shadowOffsetX = 4; 
 context.shadowOffsetY = 4; 
 context.shadowBlur = 8; 
 context.fillText ("Shadow, Blur, Stroke, Bold Text, 28pt", 20, 220); 
 context.strokeText ("Shadow, Blur, Stroke, Bold Text, 28pt", 20, 220); 
 } 

Figur G

Gradienttekst opprettes ved å bruke variabelen for å lage en lineær gradient med to par koordinater i formen createLinearGradient (x1, y1, x2, y2), der variabelen er satt som var gradient = context.createLinearGradient (5, 50, 500, 20); i dette eksemplet. Den kan tegnes når den er angitt som en fillStyle . I eksemplet nedenfor bruker vi kombinasjoner av både fyll og strek tekst med gradientinnstillingene:
 function drawCanvas () { 
 var canvas = document.getElementById ("canvasText"); 
 var context = canvas.getContext ('2d'); 
 // Fyll og strek på gradienttekst 
 var gradient = context.createLinearGradient (5, 50, 500, 20); 
 gradient.addColorStop (0.1, '# F82E23'); 
 gradient.addColorStop (0, 25, '# E2E651'); 
 gradient.addColorStop (0, 5, '# 55D268'); 
 gradient.addColorStop (0, 75, '# 5A77DA'); 
 gradient.addColorStop (1, '# C84489'); 
 context.fillStyle = gradient; 
 context.font = "dristig 36pt sans-serif"; 
 context.shadowOffsetX = 5; 
 context.shadowOffsetY = 5; 
 context.shadowBlur = 10; 
 context.fillText ("Gradient Fill Text", 20, 280); 
 context.fillStyle = '# 000000'; 
 context.strokeStyle = gradient; 
 context.lineWidth = 3; 
 context.strokeText ("Gradient Stroke Text", 20, 350); 
 } 

Figur H

Andre måter å representere lerretstext på kan være på en bane ved hjelp av konteksten mozTextAlongPath- funksjonen for å tegne tekst på sirkler, linjer eller figurer. Bildemønstre kan også inkorporeres i tekst ved bruk av fillStyle- metoden med createPattern (img, repetisjon) -funksjonen.

© Copyright 2021 | pepebotifarra.com