طريقة HTML canvas quadraticCurveTo ()
مثال
ارسم منحنى بيزير تربيعيًا:
جافا سكريبت:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.stroke();
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الطريقة بالكامل.
| Method | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | Yes | 9.0 | Yes | Yes | Yes |
التعريف والاستخدام
تضيف الطريقة quadraticCurveTo () نقطة إلى المسار الحالي باستخدام نقاط التحكم المحددة التي تمثل منحنى بيزير تربيعيًا.
يتطلب منحنى بيزير التربيعي نقطتين. النقطة الأولى هي نقطة التحكم المستخدمة في حساب بيزير التربيعي والنقطة الثانية هي نقطة النهاية للمنحنى. نقطة البداية للمنحنى هي النقطة الأخيرة في المسار الحالي. إذا كان المسار غير موجود ، فاستخدم أساليب startPath () و moveTo ( ) لتحديد نقطة البداية.
نقطة البداية:
moveTo ( 20،20 )
نقطة تحكم:
منحنى من الدرجة الثانية إلى ( 20،100 ، 200،20)
نقطة النهاية:
منحنى من الدرجة الثانية إلى (20،100، 200،20 )
نصيحة: تحقق من طريقة bezierCurveTo () . لديها نقطتي تحكم بدلاً من نقطة واحدة.
| بناء جملة JavaScript: | السياق quadraticCurveTo ( cpx، cpy، x، y ) ؛ |
|---|
قيمه المعامل
| Parameter | Description | Play it |
|---|---|---|
| cpx | The x-coordinate of the Bézier control point | |
| cpy | The y-coordinate of the Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |
❮ مرجع قماش HTML