canvas绘制路径(直线、圆、切线圆弧、二次贝塞尔曲线、三次贝塞尔曲线、矩形)

本文深入探讨HTML5 Canvas API，介绍如何使用canvas元素进行基本图形绘制，包括直线、圆、切线圆弧、二次及三次贝塞尔曲线的绘制方法，并详细阐述了矩形的画法。通过对这些图形的实践操作，掌握Canvas的绘图技巧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas绘制路径</title>
    <style>
        body{margin: 0;overflow: hidden;}
        #test{background-color: antiquewhite;}
    </style>
</head>
<body>
    <canvas id="test"></canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        const cvs = document.getElementById("test");
        cvs.width = 2000;
        cvs.height = 2000;

        const ctx = cvs.getContext('2d');
        ctx.lineWidth=10;

        /*
        1.开始建立路径：beginPath()
        2.向路径集合中添加子路径：
        [
            形状; closePath() 可选,
            moveTo(x,y); 形状; closePath() 可选,
            moveTo(x,y); 形状; closePath() 可选,
        ]
        3.显示路径：填充fill() ，描边stroke()
        */

        /*直线：lineTo(x,y); */
        ctx.beginPath();
        ctx.moveTo(50,50);
        ctx.lineTo(500,50);
        ctx.lineTo(500,250);
        ctx.closePath();
        ctx.stroke();
        ctx.fill()

        /*arc(x,y,半径，开始弧度，结束弧度，方向)*/
        ctx.moveTo(650,650);
        ctx.arc(
        450,650,
        200,
        0,Math.PI*3/2,
        );

        ctx.moveTo(1150,650);
        ctx.arc(
            950,650,
            200,
            0,Math.PI*3/2
        )
        ctx.stroke();

        
        /*切线圆弧：arcTo(x1,y1,x2,y2,半径)*/
        ctx.moveTo(600,50);
        ctx.lineTo(1000,50);
        ctx.lineTo(1000,250);
        ctx.stroke();

        ctx.moveTo(600,50);
        ctx.arcTo(
            1000,50,
            1000,250,
            200
        );
        ctx.stroke();

        /*二次贝塞尔曲线：quadraCurveTo(cpx1,cpy1,x,y)*/
        // ctx.moveTo(50,900);
        // ctx.lineTo(400,900);
        // ctx.lineTo(400,1150);
        // ctx.stroke();

        ctx.moveTo(50,900);
        ctx.quadraticCurveTo(
            400,1400,
            400,1150,
        )
        ctx.stroke();

        /*三次贝塞尔曲线：bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)*/
        // ctx.moveTo(500,900);
        // ctx.lineTo(950,900);
        // ctx.lineTo(950,1150);
        // ctx.lineTo(1150,1150);
        // ctx.stroke();

        //开始点
        ctx.moveTo(500,1000);
        ctx.bezierCurveTo(
            //控制点1
            700,1000,
            //控制点2
            950,1150,
            //结束点
            1150,1150
        )
        ctx.stroke();

        /*矩形：rect(x,y,w,h)*/
        ctx.rect(
            1300,50,
            400,200
        )
        ctx.rect(
            1300,350,
            400,200
        )
        ctx.stroke();
    </script>
</body>
</html>