Johdanto HTML-kankaaseen
Tässä artikkelissa näemme ääriviivat HTML-kankaalla. Kuten jo tiedät, HTML on merkintäkieli. Jos haluat antaa tietoja vierailijalle, voit kirjoittaa HTML-näytöllä näytöllä näytettävän tekstin ja kuinka se näytetään, ts. Fonttikoko, väri, suunta jne. Kun sivulle lisätään visioita, sinun on linkitettävä linkki ja upota kuvia sivulle, jotka tallennetaan erillään isäntäsi HTML-tiedostosta.
Mutta entä jos sinun täytyy piirtää jotain sivulle?
Mikä on HTML-kangas?
HTML-kangas (käytetään tunnisteen kautta) on HTML-elementti, jota käytetään piirtämään grafiikoita (viivat, palkit, kuvaajat jne.) Käyttäjän tietokoneen näytölle lennossa. Kankaalelementti on kuitenkin vain säilytysdata, mutta piirustus tehdään JavaScriptin kautta. Sitä tukevat kaikki nykyaikaiset selaimet, jotka tukevat HTML5: tä ja voivat tehdä JavaScriptin. HTML-kankaan luominen on hyvin yksinkertaista, ja voit lisätä sen mihin tahansa HTML-sivulle seuraavan avulla.
Syntaksi:
Content here
Voit määrittää kankaan koon leveys- ja korkeusominaisuuden avulla. Tunnisteessa voidaan määrittää myös elementtitunnus, joka mahdollistaa CSS-tyylien käytön kankaalle. Seuraava on esimerkki siitä, kuinka voit piirtää suorakulmion Canvas-elementin avulla:
Koodi:
#examplecanvas(border:2px solid green;)
lähtö:
Esimerkkejä HTML-kangaspiirustuksesta
Nyt kun olet nähnyt kuinka voit piirtää suorakulmion kangaselementillä, katsotaanpa joitain muita objekteja, jotka voidaan piirtää elementin avulla selaimen tulostuksen näytölle.
1. Piirrä viiva sivulle
moveTo (), stroke () ja lineTo () ovat menetelmiä, joilla voidaan piirtää suoria viivoja verkkosivulle. Kuten voit arvata, moveTo () kertoo kohdistimen sijainnin elementtiosaan ja lineTo () on menetelmä, joka kertoo rivin loppupisteen. Isku () tekee viivan näkyväksi. Tässä on koodi viitteellesi:
Koodi:
Canvas Line Example
canvas (
border: 2px solid black;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(350, 100);
context.stroke();
);
lähtö:
2. Piirrä ympyrä HTML-kankaalle
Toisin kuin suorakulmioita, JavaScript ei sisällä erityistä menetelmää ympyrän piirtämiseen. Sen sijaan voimme käyttää arc () -menetelmää, jota käytetään piirtämään kaaria piirtämään ympyrä kankaalle. Saadaksesi kankaan, jossa on ympyrä, voit käyttää seuraavaa:
Syntaksi :
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Tässä on esimerkki sivulta, jolla on ympyrä:
Koodi:
Canvas with a circle
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(250, 150, 90, 0, 2 * Math.PI, false);
context.stroke();
);
lähtö:
3. Tekstin piirtäminen HTML-kankaalle
Teksti voidaan piirtää myös HTML-piirtoalustalle. Jos haluat saada tekstiä kankaalle, voit haastaa filltext () -menetelmän. Seuraava on esimerkki HTML-sivulta, joka sisältää tekstiä kangaselementin sisällä:
Koodi:
canvas with text inside the element
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.font = "bold 28px Arial";
context.fillText("This is text inside a canvas", 60, 100);
);
lähtö:
4. Kaavan piirtäminen HTML-kankaalle
Kuten keskustelimme ympyrän kanssa, on olemassa menetelmä nimeltään arc (), jota käytetään piirtämään kaaria HTML-kankaan sisälle. Tässä on menetelmän syntaksi, johon sinun tarvitsee vain lisätä muuttuja:
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
Seuraava on HTML-sivu, jolla on kaari kangaselementin sisällä:
Koodi:
Arc inside an HTML Canvas
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(300, 300, 200, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
);
lähtö:
5. Piirrä lineaarinen tai pyöreä värigradientti
Tämän menetelmän avulla voit luodaLienearGradient (): n piirtääksesi valitsemasi kaltevuudet kankaalle. Tällä menetelmällä sinun on käytettävä addColorStop () -merkkiä kaltevuusväreihin.
Syntaksi:
var gradient = context.createLinearGradient(startX, startY, endX, endY);
Tässä on sivu, jolla on lineaarinen kaltevuus:
Koodi:
If you are seeing this. the browser does not support the HTML5 canvas.
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(1, "red");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 300, 150);
lähtö:
Samoin menetelmä pyöreiden kaltevuuksien piirtämiseksi on createRadialGradient ().
Syntaksi:
var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);
Koodi:
If you are seeing this. the browser does not support the HTML5 canvas.
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createRadialGradient(80, 50, 10, 100, 50, 90);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "yellow");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 150, 80);
lähtö:
johtopäätös
Nyt kun olet perehtynyt HTML-kankaaseen ja kuinka sitä voidaan käyttää verkkosivuilla, sinun pitäisi tuntea itsesi varmemmaksi verkkosuunnittelutaitoihisi. Vaikka kuvia voidaan käyttää joissakin tapauksissa, HTML-kankaan etuna on, että se on skaalautuva ja kevyempi koon ja käsittelytehon suhteen.
Suositeltava artikkeli
Tämä on opas HTML-kankaaseen. Tässä keskustellaan Mikä on HTML-kangas ja sen esimerkit sekä koodin toteutus ja tuotos. Voit myös käydä läpi ehdotetut artikkelimme saadaksesi lisätietoja -
- 16 parasta HTML-tyylimääritystä
- HTML vs. HTML5 | 9 parhainta vertailua
- WebGL vs Canvas - tärkeimmät erot
- 40 suosituinta HTML-haastattelua koskevaa kysymystä
- Aseta taustaväri HTML-muodossa esimerkillä