دليل HTML

كامل قائمة العلامات HTML

خصائص width في HTML canvas

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

مثال على الإنترنت

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

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام خاصية width في <canvas> HTML5 - تعليمية أساسية (oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="200"　height="200"　style="border:1px　solid">
browser الخاص بك لا يدعم علامة HTML5 canvas.
</canvas>
<script>
var　c　=　document.getElementById("myCanvas");
var　ctx　=　c.getContext("2d");
ctx.fillStyle　=　"#92B901";
ctx.fillRect(50,　50,　100,　100);
</script>
</body>
</html>

التحقق من ذلك ‹/›

متاحية المتصفحات

IEFirefoxOperaChromeSafari

يدعم جميع المتصفحات الرئيسية خاصية width.

ملاحظة: Internet Explorer 8 وكل الإصدارات السابقة لا تدعم علامة <canvas>.

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

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

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

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

نصيحة: يرجى زيارة HTML Canvas تعلم المزيد عن <canvas> في هذا الدليل.

الفرق بين HTML 4.01 و HTML 5

<canvas> هو علامة جديدة في HTML5.

النحو

<canvas width="البكسل">

القيمة الخاصة للخصائص

القيمة	الوصف
البكسل	حدد خاصية width للـ canvas بشكل مطلق، بالبكسل (مثل "100"). القيمة الافتراضية لـ width هي "300"

مزيد من الأمثلة

بالنقر على إعداد خاصية width أو height (باستخدام JavaScript) يمكنك مسح الرسم البياني:

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام خاصية width في <canvas> HTML5 - تعليمية أساسية (oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="200"　height="200"　style="border:1px　solid">
browser الخاص بك لا يدعم علامة HTML5 canvas.
</canvas>
<br>
<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>
<button　onclick="clearCanvas()">Clear　canvas</button>
</body>
</html>

التحقق من ذلك ‹/›

HTML <canvas> العلامة

HTML: <template> العلامة