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">
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>
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 |