HTML canvas bezierCurveTo() method
Definition and usage
bezierCurveTo() method to add a point to the current path by using the specified control points of the cubic Bezier curve.
Hint:Three Bezier curves require three points. The first two points are used as control points in the cubic Bezier calculation, and the third point is the end point of the curve. The start point of the curve is the last point in the current path. If the path does not exist, then please use beginPath() and moveTo() method to define the start point.
- Start point: moveTo(
20,20) - Control point 1: bezierCurveTo(
20,100,200,100,200,20) - Control point 2: bezierCurveTo(20,100,
200,100,200,20) - End point: bezierCurveTo(20,100,200,100,
200,20)
Hint:Please see quadraticCurveTo() method. It has one control point instead of two.
Example
Draw a cubic Bezier curve:
JavaScript:
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();
القواعد
contex.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
قيمة الم参数
| الم参数 | الوصف |
|---|---|
| cp1x | موقع x للنقطة التحكم الأولى. |
| cp1y | موقع y للنقطة التحكم الأولى. |
| cp2x | موقع x للنقطة التحكم الثانية. |
| cp2y | موقع y للنقطة التحكم الثانية. |
| x | موقع x للنقطة النهائية. |
| y | موقع y للنقطة النهائية. |
دعم المتصفحات
الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذه الخاصية بالكامل.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ملاحظة:يستخدم متصفح Internet Explorer 8 وأقدم إصداراته علامة <canvas>.
