php三次方贝赛尔曲线,三次方贝塞尔曲线的绘制

bezierCurveTo

创建一条代表三次方贝塞尔曲线的路径。你需要向该方法传入三个点的坐标

，前两个点是该曲线的控制点，最后一个是锚点

效果如图

var canvas=document.getElementById("canvas");

var context=canvas.getContext("2d");

var endPoints=[{x:130,y:70},{x:430,y:270}];

var controlPoints=[{x:130,y:250},{x:450,y:70}];

function drawBezierCurve(){

context.strokeStyle="blue"

context.beginPath()

context.moveTo(endPoints[0].x,endPoints[0].y)

context.bezierCurveTo(controlPoints[0].x,controlPoints[0].y,

controlPoints[1].x,controlPoints[1].y,

endPoints[1].x,endPoints[1].y

)

context.stroke()

}

function drawEndPoints(){

context.strokeStyle="blue"

context.fillStyle="red"

endPoints.forEach(function(point){

context.beginPath()

context.arc(point.x,point.y,5,0,Math.PI*2,false)

context.stroke()

context.fill()

})

}

function drawControlPoints(){

context.strokeStyle="yellow";

context.fillStyle='blue'

controlPoints.forEach(function(point){

context.beginPath()

context.arc(point.x,point.y,5,0,Math.PI*2,false)

context.stroke()

context.fill()

})

}

drawControlPoints()//控制点

drawBezierCurve() //曲线

drawEndPoints() //锚点