روش bezierCurveTo() کانواس HTML

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

bezierCurveTo() روش برای اضافه کردن یک نقطه به مسیر فعلی با استفاده از نقطه‌های کنترل مشخص شده برای منحنی بیزیرکوئadraticCurveTo() استفاده کنید.

توجه:منحنی بیزیرکوئadraticCurveTo() نیاز به سه نقطه دارد. دو نقطه اول برای نقطه‌های کنترل منحنی استفاده می‌شوند و نقطه سوم نقطه پایان منحنی است. نقطه شروع منحنی نقطه آخر مسیر فعلی است. اگر مسیر وجود ندارد، لطفاً از 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() روشاین یک نقطه کنترل دارد، نه دو نقطه.

مثال

یک منحنی بیزیرکوئadraticCurveTo() روش:

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

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 نقطه پایان.

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

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

کروم برزخ افرادا سفاری اپرا
کروم برزخ افرادا سفاری اپرا
4.0 9.0 3.6 4.0 10.1

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