دليل مرجعي لـ HTML

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

طريقة HTML canvas fillRect()

fillRect() هي طريقة رسم مستطيل ملون في API Canvas 2D. يبدأ المستطيل في موقع (x, y) ويزيد حجمه بـ width و height، ويحدد خاصية fillStyle نمط المستطيل.

دليل مرجع HTML canvas

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

رسم مربع ملون بقياس 100*100 بكسل:

مثال

<!DOCTYPE html>
<html>
<head>
<title>استخدام طريقة fillRect() لـ HTML canvas (دليل أساسي شبكة oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3;">
على جهاز التصفح الخاص بك، لا يدعم علامة HTML5 canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,100,100);
</script>
</body>
</html>

التحقق من ‹/›

تطابق المتصفحات

IEفايرفوكسأوبراتشوروسفاري

يدعم إنترنت إكسبلورر 9، فايرفوكس، أوبرا، تشورو، وسفاري طريقة fillRect().

النصيحة:يُعزز عنصر <canvas> في إصدارات إنترنت إكسبلورر 8 وما قبلها.

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

يُرسم المربع المملوء بواسطة طريقة fillRect() ويتم تعيين اللون الافتراضي للملء إلى الأسود.

النصيحة:النصيحة: fillStyle استخدم الخاصية لضبط اللون أو التدرج أو النمط المستخدم في ملء الرسم.

قواعد اللغة الجافا سكربت:	السياق.fillRect(x,y,العرض,الارتفاع);

قيمة الم 参数

الم 参数	الوصف
x	موقع x للركن العلوي اليسرى للمربع.
y	موقع y للركن العلوي اليسرى للمربع.
العرض	عرض المربع، مقاسه بالبكسل.
الارتفاع	ارتفاع المربع، مقاسه بالبكسل.

دليل مرجع HTML canvas

HTML: <template> العنوان