HTML5: Kuvien piirtäminen ja tekstin lisääminen kankaalle

Edellisessä viestissä, "HTML5: Työskentely kankaaselementin kanssa", tarkastelin useita tapoja manipuloida tätä elementtiä, mukaan lukien suorakulmioiden, ympyrien, kolmioiden ja vinoneliöiden muodostaminen piirtämällä polkuja ja eri sävyjen avulla rgba. Tässä segmentissä tarkastelemme piirustuskuvia ja leikkiä lisäämällä tekstiä kankaalle.

Kankaan piirtämisfunktio JavaScriptiä käyttämällä voit luoda kuvaobjektin määritellylle kankaalle. DrawImage- toiminto sisältää kolme parametria ja se ilmaistaan ​​muodossa drawImage (esinekuva, kelluva x, kelluva y) . Canvas-elementissä ja drawImage- toiminnossa tuetut kuvatiedostomuodot ovat .jpg, .gif ja .png. Jotta piirtokuvatoiminto toimisi, meidän on asetettava muuttuja ja määritettävä kuvaobjekti. Asetamme tässä esimerkissä sen "img": ksi, kuten ilmaistaan ​​muodossa var img = new Image (); ja sitten tarjotaan kuvan lähde, jota seuraa kuvan lataus ja lopullinen drawImage- toiminto parametreilla, jotka on määritelty kuten alla olevassa esimerkissä:
 // Piirrä kuva -toiminto 
 var img = uusi kuva (); 
 img.src = "images / Figure_A.png"; 
 img.onload = function () { 
 context.drawImage (img, 145, 145); 
 }; 

Tuloksena oleva kangaskuva näytetään alla Firefox 3.6: n mukaisesti:

Kuvio A

Koko koodinpätkä näkyy täällä:

 toiminto drawCanvas () { 
 var ympyrä_kangas = document.getElementById ("kangas"); 
 var konteksti = ympyrä_kanvas.getContext ("2d"); 
 // Täytä tyyli 
 context.fillStyle = "rgba (93, 179, 199, 0, 20)"; 
 // Aloita polku 
 context.beginPath (); 
 // Kankaan muoto 
 context.arc (225, 225, 115, 0, Math.PI * 2, tosi); 
 // Sulje polku 
 context.closePath (); 
 // Täytä muoto 
 context.fill (); 
 // Piirrä kuva -toiminto 
 var img = uusi kuva (); 
 img.src = "images / Figure_A.png"; 
 img.onload = function () { 
 context.drawImage (img, 145, 145); 
 }; 
 } 

Canvas-esimerkkejä

Piirrä kuvan toimintoesimerkki

Pahoittelemme, selaimesi ei tue kangasta tällä hetkellä!

Tekstin lisääminen

Canvas-teksti voidaan piirtää fontti- ja tekstimääritteillä yhdessä useiden tekstimenetelmien kanssa. Fonttimääritteen merkkijono on oletusasetuksena 10px, sans-serif, ja se voi sisältää mitä tahansa, mitä yleensä lisäät CSS-fonttisääntöön. TextAlign-määritemerkkijono on itsestään selvä, ja sillä on oletusarvo Käynnistä ja tukee arvoja: alku, loppu, vasen, oikea tai keskikohta. TextBaseline IDL -määremerkkijono on oletuksena aakkosellinen ja tukee arvoja: yläosa, roikkuu, keskimmäinen, aakkosellinen, ideografinen tai alaosa.

WHATWG määrittelee textBaseline- määritteen avainsanat, jotka vastaavat fontin kohdistuspisteitä, missä:
  • yläosa vastaa em-neliön yläosaa
  • roikkuu on roikkuva perustaso
  • keskellä on em-neliön keskikohta
  • aakkosellinen on aakkosellinen perustaso
  • ideografinen on ideografinen lähtökohta
  • alaosa vastaa em-neliön alaosaa

Tekstimenetelmiä ovat:

  • fillText ( merkkijono teksti, kelluva x, kelluva y, valinnainen kelluva maxWidth)
  • strokeText ( merkkijono teksti, kelluva x, kelluva y, valinnainen kelluva maks.leveys)

Metrics-käyttöliittymä sisältää MeasureText ( merkkijonoteksti ) ja palauttaa annetun tekstin TextMetrics- objektin nykyisessä kirjasimessa, toisin sanoen metrics = context.measureText (merkkijonoteksti) .

Perustekstiesimerkki sisältää viivan paksuuden kontekstin lineWidth: llä, ja täyte väri asetetaan käyttämällä fillStyle-ohjelmaa, jota voidaan käyttää myös määrittämään kaltevuusasetukset; aivohalvauksen väri asetetaan lineStylellä ; fontti ja fillText näkyvät myös alla JavaScript-koodissa ja HTML-katkelmissa.
 toiminto drawCanvas () { 
 var canvas = document.getElementById ("canvasText"); 
 var konteksti = canvas.getContext ('2d'); 
 // Täytä teksti 
 context.lineWidth = 1; 
 context.fillStyle = "# CC00FF"; 
 context.lineStyle = "# FFFF00"; 
 context.font = "18px sans-serif"; 
 context.fillText ("Täytä teksti, 18px, sans-serif", 20, 20); 
 } 

Canvas-tekstiesimerkkejä

Pahoittelemme, selaimesi ei tue kangasta tällä hetkellä!

Alla oleva kuvakaappaus näyttää yllä olevan koodin tuloksen, sellaisena kuin se on näkyvissä Firefox 3.6: ssa.

Kuvio B

Seuraava esimerkki näyttää strokeText- koodin käyttämällä JavaScriptiä seuraavan kuvakaappauksen kanssa.

 toiminto drawCanvas () { 
 var canvas = document.getElementById ("canvasText"); 
 var konteksti = canvas.getContext ('2d'); 
 // Stroke-teksti 
 context.font = "22px verdana"; 
 context.strokeText ("Stroke Text, 22px, veranta", 20, 50); 
 } 

Kuvio C

Fonttitoisto tässä esimerkissä näyttää kursivoinnin, 26 kuvapisteen ja ajan lisäämisen fonttiin:

 toiminto drawCanvas () { 
 var canvas = document.getElementById ("canvasText"); 
 var konteksti = canvas.getContext ('2d'); 
 // Kursivoitu teksti 
 context.font = "kursivoitu 26px Times"; 
 context.strokeText ("Kursivoitu, lyönti, teksti, 26xx, kertaa", 20, 85); 
 } 

Kuvio D

Tässä esimerkissä Fill Stroke Text osoittaa sekä fillText- että strokeText-kontekstin, mikä tarkoittaa, että teksti on piirrettävä kahdesti samoilla x- ja y-koordinaateilla, kuten JavaScripti-katkelmassa ja siihen liitetyssä kuvakaappauksessa näytetään:
 toiminto drawCanvas () { 
 var canvas = document.getElementById ("canvasText"); 
 var konteksti = canvas.getContext ('2d'); 
 // Täytä viivan teksti 
 context.lineWidth = 2; 
 context.strokeStyle = "rgba (35, 70, 237, .8)"; 
 context.font = "28pt sans-serif"; 
 context.fillText ("Täytä, viivan teksti, 28pt, sans-serif", 20, 130); 
 context.strokeText ("Täytä, viivan teksti, 28pt, sans-serif", 20, 130); 
 } 

Kuvio E

Varjotekstitehosteita voidaan tehdä kankaassa käyttämällä shadowOffsetX-, shadowOffsetY- ja shadowColor-konteksteja, kuten esimerkki katkelmassa ja mukana olevassa kuvakaappauksessa esitetään:

 toiminto drawCanvas () { 
 var canvas = document.getElementById ("canvasText"); 
 var konteksti = canvas.getContext ('2d'); 
 // Varjo lihavoitu teksti 
 context.lineWidth = 1; 
 context.fillStyle = "# 0000FF"; 
 context.strokeStyle = "# 880000"; 
 context.font = "lihavoitu 28pt: n sans-serif"; 
 context.shadowOffsetX = 2; 
 context.shadowOffsetY = -2; 
 context.shadowColor = "# 888888"; 
 context.fillText ("Varjo, lihavoitu teksti, 28pt, sans-serif", 20, 180); 
 } 

Kuvio F

Sumennus lisätään kontekstiin shadowBlur ; JavaScript-koodinpätkä ja siitä tuleva kuvakaappaus ovat alla:

 toiminto drawCanvas () { 
 var canvas = document.getElementById ("canvasText"); 
 var konteksti = canvas.getContext ('2d'); 
 // Varjojen hämärtämisen rohkea teksti 
 context.fillStyle = "# 5CADE9"; 
 context.lineStyle = "# 5CADE9"; 
 context.font = "lihavoitu 28pt: n sans-serif"; 
 context.shadowOffsetX = 4; 
 context.shadowOffsetY = 4; 
 context.shadowBlur = 8; 
 context.fillText ("Varjo, sumennus, aivohalvaus, lihavoitu teksti, 28pt", 20, 220); 
 context.strokeText ("Varjo, sumennus, aivohalvaus, lihavoitu teksti, 28pt", 20, 220); 
 } 

Kuvio G

Gradienttiteksti luodaan käyttämällä muuttujaa lineaarisen gradientin luomiseksi kahdella koordinaattiparilla muodossa createLinearGradient (x1, y1, x2, y2), jossa muuttujaksi on asetettu var gradient = context.createLinearGradient (5, 50, 500, 20); tässä esimerkissä. Se voidaan piirtää, kun se on asetettu fillStyle . Seuraavassa esimerkissä käytämme sekä täyttö- että viivatekstin yhdistelmiä kaltevuusasetuksilla:
 toiminto drawCanvas () { 
 var canvas = document.getElementById ("canvasText"); 
 var konteksti = canvas.getContext ('2d'); 
 // Gradient-tekstin täyttö ja aivohalvaus 
 var-gradientti = konteksti.luoLinearGradient (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 = kaltevuus; 
 context.font = "lihavoitu 36pt sans-serif"; 
 context.shadowOffsetX = 5; 
 context.shadowOffsetY = 5; 
 context.shadowBlur = 10; 
 context.fillText ("Gradient Fill Text", 20, 280); 
 context.fillStyle = '# 000000'; 
 context.strokeStyle = kaltevuus; 
 context.lineWidth = 3; 
 context.strokeText ("Gradient Stroke Text", 20, 350); 
 } 

Kuvio H

Muita tapoja piirtoalustan tekstin esittämiseksi voi olla polulla konteksti mozTextAlongPath- toiminnon avulla piirtääksesi tekstiä piireihin, viivoihin tai muotoihin. Kuvakuviot voidaan myös sisällyttää tekstiin käyttämällä fillStyle- menetelmää luodepaatteri (img, uusinta) -toiminnolla.

© Copyright 2020 | mobilegn.com