Hvordan å tegne rektangler og tekst med HTML5 Canvas-dummies

Noen primitive figurer kan trekkes direkte på lerretselementets grafikk av HTML5. De vanligste figurene er rektangler og tekst, som også kan ha skygger. Slik lager du begge.

Tegne rektangler med HTML5 lerret

Du kan tegne tre forskjellige typer rektangler, som vist på figuren:

• clearRect (x, y, w, h) : Sletter et rektangel med øvre venstre hjørne (x, y) og størrelse (w, h). Generelt slettes trekk i bakgrunnen farge.

• fillRect (x, y, w, h) : Tegner en boks med øvre venstre hjørne (x, y) og størrelse, h). Rektangelet er fylt ut med den for øyeblikket definerte fillStyle.

• strokeRect (x, y, w, h) : Tegner en boks med øvre venstre hjørne (x, y) og størrelse (w, h). Boksen er ikke fylt ut, men omrisset er tegnet i den nåværende definerte strokeStyle og usi ng den nåværende linjebredden.

  

Her er koden som genererer figuren:

funksjonstegn () {var drawing = document. getElementById ("drawing"); var con = tegning. getContext ("2D"); lure. fillStyle = "rød"; lure. strokeStyle = "green"; lure. lineWidth = "5"; lure. fillRect (10, 10, 180, 80); lure. strokeRect (10, 100, 180, 80);} // endelige tegning

Tegne tekst med HTML5 lerret

lerretet har full støtte for tekst. Du kan legge til tekst hvor som helst på lerretet, ved hjelp av hvilken skriftstil og størrelse du vil ha, som vist i denne illustrasjonen av et lerret med innebygd tekst:

Det første trinnet i tegning av tekst er å velge skrift. Skrivefonter er opprettet ved å tilordne en skrift til kontekstens skriftattributt. Skrifter defineres som en enkelt streng-skriftoppgave i CSS. Du kan angi alle skriftkarakteristikkene i samme rekkefølge som du gjør når du bruker skrifttypens snarvei: stil, variant, vekt, størrelse og familie.

Når du er klar til å vise faktisk tekst på skjermen, bruker du fillText () -metoden, som aksepterer tre parametere: teksten som skal vises, og X- og Y-posisjonen til venstre på teksten. Følgende kode ga resultatene i figuren:

funksjonstegn () {var drawing = document. getElementById ("drawing"); var con = tegning. getContext ("2D"); // klart bakgrunnsbilde fillStyle = "white"; lure. fillRect (0, 0, 200, 200); // tegne skrifttype i rødt con. fillStyle = "rød"; lure. font = "20pt sans-serif"; lure. fillText ("Canvas Rocks!", 5, 100); lure. strokeText ("Canvas Rocks!", 5, 130);} // ende draw