HTML <canvas> height ominaisuus

Määrittely ja käyttö

height Ominaisuus määrittää <canvas>-elementin korkeuden pikseleinä.

Vinkki

Käytä width-ominaisuus Määritä <canvas>-elementin leveys pikseleinä.

Kun asetetaan uudelleen taulukon korkeus tai leveys, taulukon sisältö tyhjennetään (katso esimerkki sivun alareunassa).

Vierailkaamme HTML Canvas -opas Opitaan lisää <canvas>-elementistä tästä.

Esimerkki

Esimerkki 1

Korkeus ja leveys molemmat 200 pikselin <canvas>-elementti:

<canvas id="myCanvas" width="400" height="400" style="border:1px solid">

Kokeile itse

Esimerkki 2

Asettamalla korkeusominaisuuden 300px:llä tyhjennät taulukon (JavaScriptin avulla):

<canvas id="myCanvas" width="400" height="400" style="border:1px solid"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#0192B9";
ctx.fillRect(50, 50, 300, 300);
function clearCanvas() {
  c.height = 400;
}
</script>

Kokeile itse

Syntaksi

<canvas height="pixels">

Omia arvoja

Arvo Kuvaus
pixels Määritetään kuvaruudun korkeus pikseleinä (esim. "100"). Oletusarvo on 150.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan selaimen version.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0