مثال
رسم منحنى بيزيه مكعب:
جافا سكريبت:
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(); انها محاولة لنفسك » دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل الأسلوب.
| طريقة | |||||
|---|---|---|---|---|---|
| bezierCurveTo() | 4.0 | تسعة | 3.6 | 4.0 | 10.1 |
تعريف والاستخدام
و bezierCurveTo() يضيف الأسلوب أشر إلى المسار الحالي باستخدام نقاط التحكم المحددة التي تمثل منحنى بيزيه مكعب.
يتطلب منحنى بيزيه مكعب ثلاث نقاط. في نقطتين الأولى هي نقاط التحكم التي تستخدم في حساب بيزيه مكعب والنقطة الأخيرة هي نقطة النهاية للمنحنى. نقطة انطلاق لمنحنى هي النقطة الأخيرة في المسار الحالي. حالة عدم وجود مسار، استخدم 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 ) Tip: راجع quadraticCurveTo() الأسلوب. لديها نقطة تحكم واحدة بدلا من اثنتين.
| جافا سكريبت بناء الجملة: | context . bezierCurveTo( cp1x,cp1y,cp2x,cp2y,x,y ) . |
|---|
قيم معلمة
| معامل | وصف | العبها |
|---|---|---|
| cp1x | الإحداثي س من أول نقطة مراقبة بيزيه | العبها " |
| cp1y | الإحداثي ص من أول نقطة مراقبة بيزيه | العبها " |
| cp2x | الإحداثي س من النقطة الثانية السيطرة بيزيه | العبها " |
| cp2y | الإحداثي ص للنقطة الثانية السيطرة بيزيه | العبها " |
| x | الإحداثي س من نقطة النهاية | العبها " |
| y | الإحداثي ص من نقطة النهاية | العبها " |