مثال
رسم منحنى بيزيه مكعب:
جافا سكريبت:
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(); انها محاولة لنفسك » دعم المتصفح
إنترنت إكسبلورر 9، فايرفوكس، أوبرا، وكروم، وسفاري دعم bezierCurveTo() الأسلوب.
ملاحظة: إنترنت إكسبلورر 8 والإصدارات السابقة، لا تدعم <canvas> العنصر.
تعريف واستخدام
و bezierCurveTo() يضيف الأسلوب وأشر إلى المسار الحالي باستخدام نقاط التحكم المحددة التي تمثل منحنى بيزيه مكعب.
يتطلب منحنى بيزيه المكعب ثلاث نقاط. في نقطتين الأولى هي نقاط المراقبة التي يتم استخدامها في حساب بيزيه مكعب والنقطة الأخيرة هي نقطة النهاية للمنحنى. نقطة انطلاق لمنحنى هي النقطة الأخيرة في المسار الحالي. حالة عدم وجود مسار، استخدم beginPath() و moveTo() طرق لتحديد نقطة البداية.
نقطة البداية
MoveTo ل(20،20) نقطة مراقبة 1
bezierCurveTo (20100، 200،100،200،20) نقطة مراقبة 2
bezierCurveTo (20100، 200100، 200،20) نقطة النهاية
bezierCurveTo (20100200100، 200،20) نصيحة: تحقق من quadraticCurveTo() الأسلوب.لديها نقطة تحكم واحدة بدلا من اثنتين.
| جافا سكريبت بناء الجملة: | context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); |
|---|
قيم معلمة
| معامل | وصف | العبها |
|---|---|---|
| cp1x | الإحداثي س من أول نقطة مراقبة بيزيه | العبها " |
| cp1y | الإحداثي ص من أول نقطة مراقبة بيزيه | العبها " |
| cp2x | الإحداثي س من النقطة الثانية السيطرة بيزيه | العبها " |
| cp2y | الإحداثي ص للنقطة الثانية السيطرة بيزيه | العبها " |
| x | الإحداثي س من نقطة النهاية | العبها " |
| y | الإحداثي ص من نقطة النهاية | العبها " |