绘制矩形

方法1：连线形成矩形，线条绘制矩形

<body>
    <canvas id="box" width="600px" height="600px">
        如果你不认我 我就会显示出来
    </canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        let canvas = document.querySelector("#box");
        let ctx = canvas.getContext("2d"); //Context 上下文
        //线条绘制矩形
        ctx.moveTo(200,300);
        ctx.lineTo(200,500);
        ctx.lineTo(400,500);
        ctx.lineTo(400,300);
        //ctx.lineTo(200,300);
        ctx.closePath();
        ctx.stroke();
        //线条连接方式:lineTo()和closePath()闭合轨迹

    </script>
</body>

closePath()闭合轨迹，会把线连接到某一点形成闭合轨迹，不一定是起始点，只要最后一笔是形成闭合的路径。ctx.lineTo(200,300);和ctx.closePath()闭合轨迹都是把最后一条线连接起来形成矩形。

方法2：

rect(x,y,width,height)

创建矩形，使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。四个参数：起点坐标x,y：矩形左上角坐标；宽度width：矩形的宽度，是像素值；高度height：矩形的高度，是像素值；

        let canvas = document.querySelector("#box");
        let ctx = canvas.getContext("2d"); //Context 上下文
        ctx.rect(40,40,400,500);
        ctx.stroke();

在坐标为100，100的地方绘制宽度为400px高度为500px的矩形。

3.strokeRect(x,y,width,height)

方法绘制矩形（不填色）。笔触的默认颜色是黑色。

使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。

x：矩形左上角的 x 坐标

y：矩形左上角的 y 坐标

width：矩形的宽度，是像素值

height：矩形的高度，是像素值

绘制填充矩形

fill()

通过填充闭合路径的内容区域生成实心的图形，如果不是闭合路径此时只是把路径的中间区域填充颜色，并不会把起点和终点连接起来。默认是黑色，fillStyle可设置填充颜色。但是直线不会填充，至少需要两条有交点的射线可以形成闭合区域。

        let canvas = document.querySelector("#box");
        let ctx = canvas.getContext("2d"); //Context 上下文
        ctx.fillStyle="gold";
        ctx.moveTo(200,300);
        ctx.lineTo(200,500);
        ctx.lineTo(400,500);
        ctx.lineTo(400,300);
        ctx.fill();
        ctx.stroke();

        let canvas = document.querySelector("#box");
        let ctx = canvas.getContext("2d"); //Context 上下文
        ctx.rect(40,40,400,500);
        ctx.fillStyle="blue";
        ctx.fill();
        ctx.stroke();

fillRect(x,y,width,height)

方法绘制“已填色”的矩形。默认的填充颜色是黑色，使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式

四个参数：起点坐标x,y：矩形左上角坐标；宽度width：矩形的宽度，是像素值；高度height：矩形的高度，是像素值；

        let canvas = document.querySelector("#box");
        let ctx = canvas.getContext("2d"); //Context 上下文
        ctx.rect(40,40,400,500);
        ctx.fillStyle="skyblue";
        ctx.fillRect(100,100,200,200);
        ctx.stroke();

绘制柱状图

<body>
    <style>
        #canvas {
            border: 1px goldenrod solid;
        }
    </style>
    <canvas id="canvas" width="700px" height="600px"></canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        let canvas=document.querySelector("#canvas");
        let ctx=canvas.getContext("2d");
        let arr=[1000,304,500,670,8899,10000,999];
        ctx.moveTo(50,550);
        ctx.lineTo(670,550);
        ctx.stroke();
        //纵轴需要换算单位避免超出画布不会显示，画布可绘制的高度是550，最大数据是10000
        //允许误差的范围就让1个单位就是540/10000，最高的柱状高度就是540,是高度(540/10000)*10000
        //所以绘制的起始纵坐标y：550=y+(540/10000)*10000，总共的高度减去柱状的高度
        for(let j=0;j<arr.length;j++){
            ctx.fillStyle="skyblue";
            ctx.fillRect(100+j*70,550-(540/10000)*arr[j],20,(540/10000)*arr[j]);
            ctx.stroke();
        };
    </script>
</body>