Canvas貝塞爾曲線-14

js部分

     window.onload = function (params) {
            // 得到繪製源
            var c = document.getElementById('canvas');
            // 創建畫布，建立二維視角
            var ctx = c.getContext('2d');
            ctx.beginPath();
            ctx.moveTo(20,20);
            //二次貝塞爾曲線需要兩個點。第一個點是用於二次貝塞爾計算中的控制點，第二個點是曲線的結束點。曲線的開始點是當前路徑中最後一個點。如果路徑不存在，那麼請使用 beginPath() 和 moveTo() 方法來定義開始點。
            ctx.quadraticCurveTo(20,200,200,0);// 現在開始點是200,0
            // 方式一
            /* ctx.quadraticCurveTo(30,110,20,20);
            ctx.stroke();
            ctx.fill(); */

            // 也可以重新定義開始點
            // 方式二
            ctx.moveTo(20,20);
            ctx.quadraticCurveTo(35,115,200,0);
            ctx.stroke(); 
            // ctx.fill();
           
        }

方式一填充：

方式二填充：