HTML5 <canvas> width özelliği

HTML <canvas> Etiketi

Tanım ve Kullanım

width width özelliği, piksel cinsinden <canvas> ögesinin genişliğini belirler.

İpucu

Kullanın height özelliği Kanca yüksekliğini piksel cinsinden belirtin.

Her seferinde kanca yüksekliğini veya genişliğini yeniden ayarladığınızda, kanca içeriği temizlenir (sayfa altındaki örneğe bakın).

Lütfen bizim HTML Canvas Eğitimi HTML5 <canvas> ögesi hakkında daha fazla bilgi edinin.

Örnek

Örnek 1

Genişliği ve yüksekliği 200 piksel olan <canvas> ögesi:

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

Kişisel olarak deneyin

Örnek 2

Canvas' genişliğini 400px olarak ayarlayarak temizleyin (JavaScript kullanarak):

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

Kişisel olarak deneyin

Sözdizimi

<canvas width="pixels">

Özellik Değeri

Değer Açıklama
pixels Canvasta belirtilen genişliği piksel cinsinden belirler (örneğin “100”). Varsayılan değeri 300'dür.

Tarayıcı Desteği

Tablo içindeki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

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

HTML <canvas> Etiketi