canvas的quadraticCurveTo和bezierCurveTo

bezierCurveTo

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

开始点：moveTo(20,20)
控制点 1：bezierCurveTo(20,100,200,100,200,20)
控制点 2：bezierCurveTo(20,100,200,100,200,20)
结束点：  bezierCurveTo(20,100,200,100,200,20)

quadraticCurveTo

  
  
 context.moveTo(168,130);  
    context.quadraticCurveTo(288,0,388,150);  
    context.stroke();  
然后自己作了下图来说明代码的解释，主要看3个点，（168,130）是起点，（388,150）是终点，（288,0）是和起末点相关的点，图画的不是很好看，不过我觉得应该可以说明一些东西了，有兴趣的可以研究一下三次方曲线，原理和二次是大同小异的。