أسلوب 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();
دعم المتصفح
يدعم Internet Explorer 9 و Firefox و Opera و Chrome و Safari طريقة bezierCurveTo ().
التعريف والاستخدام
تضيف طريقة 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 |
❮ مرجع قماش HTML