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

本文示例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();
}

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