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(50, 50);
            ctx.lineTo(500, 0)
            ctx.lineTo(0, 500);
            ctx.lineTo(500,500);
            ctx.stroke();
            /* 三次贝塞尔
                bezierCurveTo(cp1x,cp1y,cp2x,cpxy,x,y);
                绘制三次贝塞尔曲线,cp1x,cp1y为控制点1. cp2x,cp2y为控制点2
                x,y为结束点
                注意：起始点为moveTo()指定的点
            */
            ctx.beginPath();
            ctx.moveTo(50, 50); //起始点为moveTo()指定的点
            ctx.bezierCurveTo(500, 0, 0, 500,500 ,500);
            ctx.stroke();
        }
    }
</script>