دليل مرجع HTML

دليل كامل للمتغيرات HTML

مетод bezierCurveTo() في كanvas HTML

bezierCurveTo() هي طريقة لرسم مسار بيزيير ثلاثي في API Canvas 2D. تحتاج هذه الطريقة إلى ثلاثة نقاط. النقاط الأولى والثانية هي نقاط التحكم، والنقطة الثالثة هي نقطة النهاية. نقطة البداية هي النقطة الأخيرة في المسار الحالي، يمكنك تعديلها قبل رسم البيزيير عبر استدعاء moveTo().

دليل مرجع HTML canvas

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

رسم مسار بيزيير ثلاثي:

مثال

!DOCTYPE　html
<html>
<head>
<meta　charset="utf-8">
<title>استخدام طريقة bezierCurveTo() في 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.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
</script>　
</body>
</html>

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

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

IEFirefoxOperaChromeSafari

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

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

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

يضيف طريقة bezierCurveTo() نقاطًا إلى المسار الحالي باستخدام النقاط التحكم المحددة التي تمثل مسار البيزيير الثلاثي.

يحتاج مسار البيزيير الثلاثي إلى ثلاثة نقاط. النقاط الاثنتان الأولى تستخدم كنقاط التحكم في حساب البيزيير الثلاثي، والنقطة الثالثة هي نقطة نهاية المسار. نقطة البداية للمسار هي النقطة الأخيرة في المسار الحالي. إذا لم يكن المسار موجودًا، فاستخدم beginPath() و moveTo() طريقة تحديد نقطة البداية.

نقطة البداية:

moveTo(20,20)

النقطة التحكم الأولى:

bezierCurveTo(20,100,200,100,200,20)

النقطة التحكم الثانية:

bezierCurveTo(20,100,200,100,200,20)

نقطة النهاية:

bezierCurveTo(20,100,200,100,200,20)

إشارة:انظر إلى quadraticCurveTo() الطريقة. لديها نقطة تحكم واحدة وليس اثنتين.

جافا سكربت الجملة:	سياق.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

قيمة المتغير

المتغيرات	الوصف
cp1x	موقع x للنقطة التحكم الأولى.
cp1y	موقع y للنقطة التحكم الأولى.
cp2x	موقع x للنقطة التحكم الثانية.
cp2y	موقع y للنقطة التحكم الثانية.
x	موقع x للنهاية.
y	موقع y للنهاية.

دليل مرجع HTML canvas

HTML: <template> علامة