طريقة HTML canvas quadraticCurveTo()

دليل مرجعي Canvas HTML5

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

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 HTML5