HTML <canvas> szerokość Atrybut
Przykład
Element <canvas> o wysokości i szerokości 200 pikseli:
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
widthAtrybut określa szerokość
<canvas>elementu w pikselach .
Wskazówka: użyj height
atrybutu, aby określić wysokość
<canvas>elementu w pikselach.
Wskazówka: za każdym razem, gdy wysokość lub szerokość płótna zostanie ponownie ustawiona, zawartość płótna zostanie wyczyszczona (patrz przykład na dole strony).
Wskazówka: dowiedz się więcej o
<canvas>elemencie w naszym
samouczku HTML Canvas .
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje ten atrybut.
| Attribute | |||||
|---|---|---|---|---|---|
| width | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Składnia
<canvas width="pixels">
Wartości atrybutów
| Value | Description |
|---|---|
| pixels | Specifies the width of the canvas, in pixels (e.g. "100"). Default value is 300 |
Więcej przykładów
Przykład
Wyczyść płótno, ustawiając atrybut szerokości lub wysokości (za pomocą 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 = "#92B901";
ctx.fillRect(50, 50, 100, 100);
function clearCanvas() {
c.height = 300;
}
</script>
❮ Znacznik HTML <canvas>