HTML <canvas> width ominaisuus

HTML <canvas> merkki

Määrittely ja käyttö

width Ominaisuus määrittää <canvas>-elementin leveyden pikseleinä.

Vinkki

Käytä height-ominaisuus Määrittele <canvas>-elementin korkeus pikseleinä.

Kun asetat uudelleen taulukon korkeuden tai leveyden, taulukon sisältö poistetaan (katso esimerkki sivun alareunasta).

Vierasta HTML Canvas opas Opit lisää <canvas>-elementistä tästä.

Esimerkki

Esimerkki 1

Leveys ja korkeus molemmat 200 pikselin <canvas>-elementti:

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

Kokeile itse

Esimerkki 2

Määrittele leveydellä 400px poista taulukko (käytä JavaScript):

<canvas id="myCanvas" width="200" height="200" 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.width = 400;
}
</script>

Kokeile itse

Syntaksi

<canvas width="pixels">

Ominaisuusarvo

Arvo Kuvaus
pixels Määritetään kankaan leveys pikseleinä (esim. "100"). Oletusarvo on 300.

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

HTML <canvas> merkki