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

最新推荐文章于 2024-08-12 09:53:02 发布

ssbunny

最新推荐文章于 2024-08-12 09:53:02 发布

阅读量285

点赞数

分类专栏： Canvas 文章标签： Canvas

本文链接：https://blog.csdn.net/ssbunny/article/details/84114428

版权

Canvas 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

方法如下：

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();
}