Canvas quadraticCurveTo() روش

منابع Canvas

تعریف و نحوه استفاده

quadraticCurveTo() روش برای اضافه کردن یک نقطه به مسیر فعلی با استفاده از نقطه کنترل مشخص شده برای منحنی بی塞尔 دوگانه استفاده کنید.

توضیحات:منحنی بی塞尔 دوگانه نیاز به دو نقطه دارد. اولین نقطه نقطه کنترل برای محاسبات بی塞尔 دوگانه است، دومین نقطه نقطه پایان منحنی است. نقطه شروع منحنی نقطه آخر مسیر فعلی است. اگر مسیر وجود ندارد، لطفاً از beginPath() و moveTo() روش برای تعریف نقطه شروع.

منحنی بی塞尔 دوگانه
  • نقطه شروع: moveTo(20,20)
  • نقطه کنترل: quadraticCurveTo(20,100,200,20)
  • نقطه پایان: quadraticCurveTo(20,100,200,20)

توضیحات:لطفاً ببینید روش bezierCurveTo(). این دو نقطه کنترل دارد، نه یک نقطه.

مثال

یک منحنی بی塞尔 دوگانه بکشید:

مرورگر شما پشتیبانی از تگ کانواس HTML5 را ندارد.

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 مختصات افقی نقطه کنترل بی塞尔.
cpy مختصات عمودی نقطه کنترل بی塞尔.
x مختصات افقی نقطه پایان.
y مختصات عمودی نقطه پایان.

پشتیبانی مرورگر

تعداد در جدول نشان‌دهنده نسخه مرورگر اولیه است که این ویژگی را کاملاً پشتیبانی می‌کند.

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

نکته:نسخه‌های 8 و قدیمی‌تر از Internet Explorer از عنصر <canvas> پشتیبانی نمی‌کنند.

منابع Canvas