دليل HTML

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

طريقة HTML canvas strokeRect()

strokeRect() هي طريقة لتسجيل ربع دائرة في لوحة الرسم 2D باستخدام النمط الرسمي الحالي، وتسجيل ربع دائرة بمنحنى يبدأ في (x, y) وعرض w وارتفاع h. هذه الطريقة ترسم مباشرة على اللوحة دون تعديل المسار الحالي، لذا لا تؤثر أي دعوات لاحقة مثل fill() أو stroke() عليها.

دليل مرجع HTML canvas

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

رسم مربع ذو مساحة 100*100 بكسل:

مثال

<!DOCTYPE html>
<html>
<head>
<title>استخدام طريقة strokeRect() في 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.strokeRect(20,20,100,100);
</script>
</body>
</html>

اختبار لمعرفة ‹/›

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

IEFirefoxOperaChromeSafari

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

ملاحظة:Internet Explorer 8 و之前的 الإصدارات لا تدعم عنصر <canvas>.

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

يستخدم طريقة strokeRect() لرسم المربع (بدون ملء). لون الخط الافتراضي أسود.

نصيحة:نصيحة: strokeStyle استخدم الخصائص لضبط لون القلم، التدرج أو النمط.

قواعد اللغة JavaScript:	السياق.strokeRect(x,y,width,height);

قيمة الم 参数

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

دليل مرجع HTML canvas

HTML: <template> علامة