دليل HTML

مجموعة كاملة من علامات HTML

خاصية height في HTML canvas

تحدد خاصية height طول عنصر <canvas> بالبكسل، سيتم مسح محتوى اللوحة كل مرة تقوم فيها بإعادة تعيين طول أو عرض اللوحة.

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

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

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام خاصية height <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

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

ملاحظة: لا يدعم متصفح Internet Explorer 8 وأحدث إصداراته علامة <canvas>.

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

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

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

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

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

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

النحو

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

قيمة الخاصية

القيمة	الوصف
البكسل	تحديد طول اللوحة بالبكسل (مثل "100px" أو مجرد "100"). القيمة الافتراضية هي "150".

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

بالنقر على إعداد خاصية 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()">حذف الرسام</button>
</body>
</html>

اختبار لرؤية ‹/›

HTML <canvas> العلامة

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