How to draw cubic Bezier curves

Requires:  ctx.bezierCurveTo (. Cp1x, cp1y, and cp2x, cp2y, X, Y)

function Draw () {
     var Canvas = document.getElementById ( 'canv' );
     IF (! canvas.getContext) return ;
     var CTX = canvas.getContext ( "2D" ); 
    ctx.beginPath (); 
    ctx.moveTo ( 40, 200); // start point 
    var . cp1x = 20 is, cp1y = 100;   // control points. 1 
    var and cp2x = 100, cp2y = 120;   // control point 2 
    var X = 200, Y = 200; // end point 
    // drawing cubic Bezier curve 
    ctx.bezierCurveTo (. cp1x, cp1y, and cp2x, cp2y, X, Y); 
    ctx.stroke (); 
 
    // display control point
    ctx.beginPath();
    ctx.rect(40, 200, 10, 10);
    ctx.rect(cp1x, cp1y, 10, 10);
    ctx.rect(cp2x, cp2y, 10, 10);
    ctx.rect(x, y, 10, 10);
    ctx.fill();
 
}
draw();

 

Guess you like

Origin www.cnblogs.com/aisowe/p/11571916.html