canvas-二次贝塞尔曲线

<script type="text/javascript">

    window.onload = function () {
        /** @type {HTMLCanvasElement} */
        //1.获取画布
        var canvas = document.querySelector('#test');
        if (canvas.getContext) {
            //2.获取画笔
            var ctx = canvas.getContext('2d');

            ctx.beginPath();
            ctx.moveTo(200, 200);
            ctx.lineTo(500, 0)
            ctx.lineTo(400, 400);
            ctx.stroke();
            /* 二次贝塞尔
                quadraticCurveTo(cp1x,cp1y,x,y);
                绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点
                x,y为结束点
                注意：起始点为moveTo()指定的点
            */
            ctx.beginPath();
            ctx.moveTo(200, 200); //起始点为moveTo()指定的点
            ctx.quadraticCurveTo(500, 0, 400, 400);
            ctx.stroke();
        }
    }
</script>