三次方贝塞尔曲线的绘制

bezierCurveTo
创建一条代表三次方贝塞尔曲线的路径。你需要向该方法传入三个点的坐标
,前两个点是该曲线的控制点,最后一个是锚点

效果如图


三次方贝塞尔曲线的绘制_第1张图片
    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()  //锚点

你可能感兴趣的:(三次方贝塞尔曲线的绘制)