روش 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() روش:
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> پشتیبانی نمیکنند.