خصائص width لـ HTML <canvas>

علامة <canvas> في HTML

التعريف والاستخدام

width تحدد خاصية width عرض عنصر <canvas> بالبكسل.

تلميحات

استخدم خاصية height تحديد ارتفاع عنصر <canvas> بالبكسل.

عند إعادة تعيين ارتفاع أو عرض اللوحة، سيتم مسح محتوى اللوحة (انظر مثال في أسفل الصفحة).

يرجى زيارة دليل تعلم HTML Canvas لإكتساب معرفة أكثر بخصوص عنصر <canvas>.

مثال

مثال 1

عنصر <canvas> ذو الارتفاع والعرض 200 بكسل:

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

جرب بنفسك

مثال 2

بإعداد خاصية width إلى 400px يمكنك مسح اللوحة (استخدام 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>

جرب بنفسك

النحو

<canvas width="pixels">

قيمة الخاصية

القيمة وصف
pixels يحدد عرض اللوحة، بمقياس البكسل (مثل “100”)، افتراضياً 300.

دعم المتصفحات

رقم في الجدول يشير إلى إصدار المتصفح الذي يدعم الخاصية لأول مرة.

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

علامة <canvas> في HTML