Canvas三次貝塞爾曲線-15

js部分：

    window.onload = function (params) {
            // 得到繪製源
            var c = document.getElementById('canvas');
            // 創建畫布，建立二維視角
            var ctx = c.getContext('2d');
            /* 右耳朵 */
            // 創建漸變色(x,y,x1,y1)座標線條衍變
            var grd = ctx.createLinearGradient(50,60,100,0);
            grd.addColorStop(0,'red');
            grd.addColorStop(1,'blue');

            ctx.fillStyle = grd;
            ctx.beginPath();
            ctx.moveTo(200,20);
            //三次貝塞爾曲線需要三個點。前兩個點是用於三次貝塞爾計算中的控制點，第三個點是曲線的結束點。曲線的開始點是當前路徑中最後一個點。如果路徑不存在，那麼請使用 beginPath() 和 moveTo() 方法來定義開始點。
            // ctx.bezierCurveTo(200,80,180,235,20,20);
            ctx.bezierCurveTo(20,80,100,235,200,20);
            ctx.stroke();
            ctx.fill();

            /* 左耳朵 */
            var grd = ctx.createLinearGradient(100,60,0,0);
            grd.addColorStop(0,'red');
            grd.addColorStop(1,'blue');
            ctx.fillStyle = grd;
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.bezierCurveTo(120,100,30,200,0,0);
            ctx.stroke();
            ctx.fill();
        }