Tegn et rektangel med HTML5 Canvas Tag

Å bruke lerretet tag tilgjengelig i HTML5, bygge en nettside med et lerret element i den. Vanligvis gir deg bredde, høyde og id parametere for å indikere hvor stor cnavas er, som så:

<Lerret id = "tegning"
width = "200"
height = "200">
<P> Nettleseren din støtter ikke lerretet tag ... </ p>
</ Lerret>

Inne lerretet koden, kan du sette noen HTML-kode du ønsker. Denne koden vises hvis nettleseren ikke støtter lerretet tag. Vanligvis, du bare sette en slags budskap la brukeren vet hva hun mangler.

Noe interessant skjer i et lerret uten noen form for Javascript-kode. Ofte, vil du bruke en funksjon for å tegne på skjermen. Her er én uavgjort () -funksjonen, som er kalt med kroppen onload hendelsen:

funksjon draw () {
Var lerret = document.getElementById ("tegning");
if (canvas.getContext) {
Var con = canvas.getContext ('2d');
con.fillStyle = "# FF0000";
con.fillRect (10, 10, 50, 50);
} // End if
} // End uavgjort

Trekningen () -funksjonen viser alle de viktigste ideene om å jobbe med lerretet tag. Her er hvordan du bygger en enkel tegning:

1. Lag en variabel referanse til lerretet.

   Bruk standard getElementById () mekanisme for å skape en variabel henvisning til lerretet.

2. Pakk ut grafikk sammenheng fra lerretet.

   Lerret elementene har en grafikk sammenheng, som er en spesiell gjenstand som innkapsler alle tegningen metoder lerretet kan utføre. De fleste nettlesere støtter 2D-innhold nå, men 3D-sammenhenger er planlagt.

3. Still sammenheng er fillStyle, som indikerer hvor du vil farge utfylte områder (som rektangler).

   Den grunnleggende tilnærming er å levere en CSS-stil fargeverdi.

4. Lag et utfylt rektangel.

   Rektangelet formen er ganske enkelt å bygge. Det forventer fire parametre: x, y, bredde og høyde. X- og y-parametrene indikere posisjonen av rektangelet øverste venstre hjørne, og bredde- og høydeparametere de indikerer størrelsen av rektangelet. Alle mål er i piksler.