HTML canvas bezierCurveTo() 方法

定义和用法

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)

提示:请查看 quadraticCurveTo() 方法。它有一个控制点,而不是两个。

实例

绘制一条三次贝塞尔曲线:

Your browser does not support the HTML5 canvas tag.

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();

స్వయంగా ప్రయత్నించండి}}

సింటాక్స్

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

పారామీటర్ విలువలు

పారామీటర్స్ వివరణ
cp1x మొదటి బేజెల్ కంట్రోల్ పాయింట్ యొక్క x నిర్దేశం.
cp1y మొదటి బేజెల్ కంట్రోల్ పాయింట్ యొక్క y నిర్దేశం.
cp2x రెండవ బేజెల్ కంట్రోల్ పాయింట్ యొక్క x నిర్దేశం.
cp2y రెండవ బేజెల్ కంట్రోల్ పాయింట్ యొక్క y నిర్దేశం.
x ముగింపు పద్ధతి యొక్క x నిర్దేశం.
y ముగింపు పద్ధతి యొక్క y నిర్దేశం.

బ్రౌజర్ మద్దతు

పట్టికలో గింతలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ను పేర్కొన్నారు.

చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
4.0 9.0 3.6 4.0 10.1

పేర్కొనుట:Internet Explorer 8 మరియు అది ముంది వెర్షన్లు <canvas> ఎలిమెంట్ నిర్లక్ష్యం చేయబడలేదు.