bezierCurveTo
創(chuàng)建一條代表三次方貝塞爾曲線的路徑劫乱。你需要向該方法傳入三個點(diǎn)的坐標(biāo)
呵燕，前兩個點(diǎn)是該曲線的控制點(diǎn)拗军，最后一個是錨點(diǎn)
效果如圖
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()//控制點(diǎn)
drawBezierCurve() //曲線
drawEndPoints() //錨點(diǎn)
