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');
        /* 绘制一个曲线-圆 
            arc(x,y,radius,startAngle,endAngle,anticlockwise)
            画一个以(x,y)为圆心,以radius为半径的圆弧)(270*Math.PI/180)
            从startAngle开始到endAngle结束
            按照anticlockwise给定的方向(默认为顺时针)来生成
            ture：逆时针
            false：顺时针
        */
        ctx.beginPath();
        ctx.moveTo(100,100);
        ctx.arc(100,100,50,0,90*Math.PI/180,true);
        ctx.closePath();
        ctx.stroke();


        /* 绘制一个圆弧 
            arcTo(x1,y1,x2,y2,radius)
            根据给定的控制点和半径画一段圆弧
            肯定会从(x1,y1) 但不一定经过(x2,y2); (x2,y2)只是控制一个方向
        */ 
       //三个点形成一个角,一个半径为50的圆弧慢慢向这个角靠近
       ctx.beginPath();
       ctx.moveTo(200,200);
       ctx.lineTo(500,0)
       ctx.lineTo(400,400);
       ctx.stroke();

       ctx.beginPath();
       ctx.moveTo(200,200)
       ctx.arcTo(500,0,400,400,50);
       ctx.stroke();
    }
}
</script>