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

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

طريقة rect() في HTML canvas

هي طريقة rect() في API Canvas 2D لإنشاء مسار المستطيل، حيث يكون موقع البداية للمستطيل (x, y) وعرضه width وارتفاعه height. يتم ربط أربعة نقاط من المستطيل بالخطوط، ويتم إغلاق المسار كعلامة فرعية، لذا يمكنك ملء أو رسم حدود المستطيل.

دليل مرجع HTML5 كanvas

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

رسم مستطيل ذو حجم 150*100 بكسل:

مثال

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

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

متلازمة التوافق للمتصفحات

IEFirefoxOperaChromeSafari

يدعم Internet Explorer 9،Firefox،Opera،Chrome وSafari طريقة rect(). الطريقة.

ملاحظة:لا يدعم نسخة Internet Explorer 8 ومسبقها علامة <canvas>.

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

تقوم طريقة rect() بإنشاء مستطيل.

نصيحة:يرجى استخدام رسم أوملء يتم رسم المستطيل الفعلي على الورق.

جملة JavaScript:	السياق.rect(x,y,width,height);

قيمة الم参数

الم参数	الوصف
x	موقع x العلوية اليسرى للمستطيل.
y	موقع y العلوية اليسرى للمستطيل.
width	عرض المستطيل، بالبكسل.
height	ارتفاع المستطيل، بالبكسل.

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

أنشئ ثلاثة مستطيلات باستخدام طريقة rect():

مثال

<!DOCTYPE html>
<html>
<head>
<title>استخدام طريقة rect() في HTML canvas (دليل أساسي على oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة HTML5 canvas.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
//　مستطيل أحمر
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);　　
ctx.stroke();
//　مستطيل أخضر
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
//　مستطيل أزرق
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
</script>　
</body>
</html>

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

دليل مرجع HTML5 كanvas

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