Canvas入门实例07：二次方贝塞尔曲线

最新推荐文章于 2022-09-28 11:29:25 发布

ssbunny

最新推荐文章于 2022-09-28 11:29:25 发布

阅读量642

点赞数

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

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

版权

Canvas 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

canvas画二次方贝塞尔曲线的方法如下：

context.quadraticCurveTo(cpx, cpy, x, y)

其中，

cpx 控制点横坐标

cpy 控制点纵坐标

x 终止点横坐标

y 终止点纵坐标

这样说太抽象，还是来看一下二次方贝塞尔曲线的公式：

公式中可以看出，影响二次方贝塞尔曲线的因素主要有三个：

1) 起始点P0 (t=0时)

2) 控制点P1

3) 终止点P2 (t=1时)

好吧，P1就是点(cpx,cpy)，P2即(x,y)，那么P0呢？自然是当前path的最后坐标咯！

还是很抽象？来看下二次方贝塞尔曲线的生成过程：

明白了？来画一下：

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

是不是这样的？很简单吧：