أسلوب HTML canvas bezierCurveTo ()
مثال
ارسم منحنى بيزيير مكعب:
جافا سكريبت:
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();
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الطريقة بالكامل.
| Method | |||||
|---|---|---|---|---|---|
| bezierCurveTo() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
التعريف والاستخدام
تضيف طريقة bezierCurveTo () نقطة إلى المسار الحالي باستخدام نقاط التحكم المحددة التي تمثل منحنى بيزير مكعبًا.
يتطلب منحنى بيزير مكعب ثلاث نقاط. النقطتان الأوليان هما نقطتا تحكم يتم استخدامهما في حساب بيزير التكعيبي والنقطة الأخيرة هي نقطة نهاية المنحنى. نقطة البداية للمنحنى هي النقطة الأخيرة في المسار الحالي. إذا كان المسار غير موجود ، فاستخدم أساليب startPath () و moveTo ( ) لتحديد نقطة البداية.
نقطة البداية
moveTo ( 20، 20 )
نقطة التحكم 1
منحنى بيزير إلى ( 20 ، 100 ، 200 ، 100 ، 200 ، 20)
نقطة التحكم 2
منحنى بيزير إلى (20 ، 100 ، 200 ، 100 ، 200 ، 20)
نقطة النهاية
منحنى بيزير إلى (20 ، 100 ، 200 ، 100 ، 200 ، 20 )
نصيحة: تحقق من طريقة quadraticCurveTo () . لديها نقطة تحكم واحدة بدلاً من نقطتين.
| بناء جملة JavaScript: | السياق .bezierCurveTo ( cp1x، cp1y، cp2x، cp2y، x، y ) ؛ |
|---|
قيمه المعامل
| Parameter | Description | Play it |
|---|---|---|
| cp1x | The x-coordinate of the first Bézier control point | |
| cp1y | The y-coordinate of the first Bézier control point | |
| cp2x | The x-coordinate of the second Bézier control point | |
| cp2y | The y-coordinate of the second Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |