مетод Canvas quadraticCurveTo()

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

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

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

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

مجريات البیسيلير الثنائية
  • النقطة البداية: moveTo(20,20)
  • النقطة التحكم: quadraticCurveTo(20,100,200,20)
  • النقطة النهائية: quadraticCurveTo(20,100,200,20)

نصيحة:انظر إلى طريقة bezierCurveTo()، ولديه نقطتين تحكم، وليس نقطة واحدة.

مثال

رسم منحنى بيزيير ثنائي:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

تجربة شخصية

النحو

context.quadraticCurveTo(cpx,cpy,x,y);

قيمة المتغير

المتغيرات الوصف
cpx موقع x للنقطة التحكم البيزيير.
cpy موقع 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