Canvas入门实例08：三次方贝塞尔曲线

本文示例三次方贝塞尔曲线的画法。

方法如下：

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

其中，

    cp1x 控制点1的横坐标

    cp1y 控制点1的纵坐标

    cp2x 控制点2的横坐标

    cp2y 控制点2的纵坐标

    x 终止点横坐标

    y 终止点纵坐标

参考上一篇二次方贝塞尔曲线的画法很容易理解，只不过三次方贝塞尔曲线有两个控制点，可以在平面或三维空间(canvas暂未提供)中控制曲线的走向。

 

公式：

  

形成过程：

  

来实际画一下吧：

function drawScreen(){
        var context = theCanvas.getContext('2d');
        
        context.beginPath();
        context.strokeStyle = 'red';
        context.lineWidth = 2;
        context.moveTo(20, 100);
        //三次方贝塞尔曲线
        context.bezierCurveTo(10, 30, 120, 40, 220, 100);
        context.stroke();
        context.closePath();
        
        //标出相关坐标及连线
        context.fillStyle = 'black';
        context.fillText('(20, 100)', 20, 100);
        context.fillText('(10, 30)', 10, 30);
        context.fillText('(120, 40)', 120, 40);
        context.fillText('(220, 100)', 160, 110);
        context.beginPath();
        context.strokeStyle = 'black';
        context.lineWidth = 1;
        context.moveTo(20, 100);
        context.lineTo(10, 30);
        context.lineTo(120, 40);
        context.lineTo(220, 100);
        context.stroke();
        context.beginPath();
        context.arc(10, 30,2,0,2*Math.PI, false);
        context.arc(120, 40,2,0,2*Math.PI, false);
        context.fill();
        context.closePath();
}

 效果如下：

  

最后，综合两种曲线的画法，我们来牛刀小试一下：

  

function drawScreen(){
        var context = theCanvas.getContext('2d');
        
        context.beginPath();
        context.moveTo(170,0);
        context.bezierCurveTo(0,125,300,175,130,300);
        context.moveTo(250,0);
        context.lineTo(250,300);
        context.quadraticCurveTo(400,180,250,130);
        context.quadraticCurveTo(400,60,250,0);
        context.stroke();
        
        context.closePath();
}

 

 

 

评论

1 楼 qalong 2013-07-18  

如此好文，哪能不顶