طريقة bezierCurveTo() لـ Canvas

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

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

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

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

خطوط البيسيل الثلاثية
  • النقطة البداية: moveTo(20,20)
  • النقطة السيطرة 1: bezierCurveTo(20,100,200,100,200,20)
  • النقطة السيطرة 2: bezierCurveTo(20,100,200,100,200,20)
  • النقطة النهائية: bezierCurveTo(20,100,200,100,200,20)

نصيحة:انظر إلى طريقة quadraticCurveTo(). يحتوي على نقطة سيطرة واحدة وليس اثنتين.

مثال

رسم منحنى بيسيير ثلاثي

متصفحك لا يدعم علامة HTML5 canvas.

JavaScript:

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();

جرب بنفسك

النحو

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

قيمة الم 参数

الم 参数 الوصف
cp1x موقع x للنقطة الأولى من النقاط السيطرة للبيسيير.
cp1y موقع y للنقطة الأولى من النقاط السيطرة للبيسيير.
cp2x موقع x للنقطة الثانية من النقاط السيطرة للبيسيير.
cp2y موقع y للنقطة الثانية من النقاط السيطرة للبيسيير.
x موقع x للنقطة النهائية.
y موقع y للنقطة النهائية.

دعم المتصفح

الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم الخاصية بكاملها.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

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