دليل HTML

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

طريقة HTML canvas arc()

هي طريقة arc() في API Canvas 2D لرسم مسار دائرة. يتم رسم مسار الدائرة من منتصف الدائرة في موقع (x, y) مع قطر r، وتبدأ من زاوية البداية startAngle وتنتهي في زاوية النهاية endAngle بناءً على الاتجاه anti-clockwise (بافتراض السمت الساعي).

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

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

رسم دائرة:

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام طريقة HTML canvas arc() - درس أساسي (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.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
</script>　
</body>
</html>

اختبار لمعرفة إذا كان ‹/›

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

IEFirefoxOperaChromeSafari

يدعم متصفح Internet Explorer 9، Firefox، Opera، Chrome و Safari طريقة arc(). الطريقة.

ملاحظة:لا يدعم متصفح Internet Explorer 8 وما قبلها عنصر <canvas>.

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

يخلق الطريقة arc() دائرة/شكل منحنى (لإنشاء دائرة أو جزء من دائرة).

نصيحة:إذا قمت بإنشاء دائرة باستخدام arc()، قم بتنفيذ العمليات التالية: ضع زاوية البداية على 0، وضع زاوية النهاية على 2 * Math.PI.

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

مركز:

arc(100,75,50,0*Math.PI,1.5*Math.PI)

زاوية البداية:

arc(100,75,50,0,1.5*Math.PI)

زاوية النهاية:

arc(100,75,50,0*Math.PI,1.5*Math.PI)

جملة JavaScript:	السياق.arc(x,y,r,sAngle,eAngle,counterclockwise);

قيمة المتغير

المتغيرات	الوصف
x	مستوى x مركز الدائرة.
y	مستوى y مركز الدائرة.
r	قطر الدائرة.
sAngle	زاوية البداية، بالراديان (موقع الساعة الثالثة من الدائرة هو 0 درجة).
eAngle	زاوية النهاية، بالراديان.
counterclockwise	اختياري. يحدد ما إذا كان الرسم يجب أن يكون باتجاه الساعة أو بعكس الاتجاه. False = باتجاه الساعة، true = بعكس الاتجاه.

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

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