二次贝塞尔曲线需要三个点的坐标数据：曲线起始点坐标（x1,y1）、曲线控制点坐标（cpx,cpy）和曲线终点坐标（x2,y2）。在 canvas 画布中，起始点坐标默认使用上一次绘制图形的路径终点坐标，没有路径终点坐标时起始点坐标为（0,0），也可以使用 moveTo(x,y) 指令重新定义。canvas 绘制二次贝塞尔曲线有专门的指令，quadraticCurseTo(cpx, cpy, endX, endY), 其中，cpx 和 cpy 为曲线控制点坐标，endX 和 endY 为曲线终点坐标，曲线起点坐标取上一回路径终点坐标或通过 moveTo(x,y) 指令定义。假设画笔标识为 ctx，我们来绘制一条二次贝塞尔曲线：

ctx.moveTo(50, 100);
ctx.quadraticCurveTo(120, 0, 250, 100);

这表示，曲线从（50,100）出发，到（250，100）停车，曲线的控制点是（120, 10），效果如下示例所示（小圆点用于标识三个点的位置）：

影响二次贝塞尔曲线的外观主要是控制点，上例中的小绿点就是控制点。控制点可以在曲线上，若此，绘制出来的将不是曲线而是一条直线；控制点可以为正负数、可以超出画布的范围，不同的数值将直接影响曲线的曲率和最终外观。

单纯使用二次贝塞尔曲线，我们就可以绘制出奇妙的动态图案。以下代码，我们仅来回改变控制点（cpx,cpy）中的cpy值，作出的动态图案十分令人惊艳，它还有无限可能：

以上代码，可以保存为本地 .html 文档或将代码拿到 pencil code 运行以查看效果，提醒一下，动画是可以暂停和继续运行的，方法是单击画布。