js:三种简单的矩形绘制方法（画布canvas）

本文介绍了HTML5 Canvas中除了lineto方法之外的三种简单矩形绘制方法：rect()用于创建路径，fillRect()用于创建并填充矩形，strokeRect()则用于绘制矩形边框。此外，还提到了clearRect()方法用于清除矩形区域的填充。在绘制与填充的关系上，填充会覆盖绘制，并且clearRect只能清除已填充的矩形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前提到过画布canvas通过lineto方法绘制矩形，实际上画布canvas还有三种其他更简便的方法绘制矩形，而lineto方法可以绘制任何直线图形

三种绘制矩形的方法分别是：

rect();创建矩形路径（只生成路径）

fillRect();创建填充的矩形路径（生成路径并填充）

strokeRect();创建矩形路径并绘制（生成路径并绘制）

另外有一种清除矩形填充的方法（个人理解为矩形形状的橡皮擦）：

clearRect()

这是之前的博客：https://blog.youkuaiyun.com/qq_52824207/article/details/124218544

这是使用lineto方法的代码（后面只给出绘制部分）：

<!DOCTYPE html>
<html>
    <head>
        <title>画布canvas测试</title>
        <style>
            body{
                text-align: center;
            }
            #view{
                /* height: 500px;
                width: 500px; */
                /* canvas的宽度和高度设置在标签内，否则线条会变粗颜色变淡 */
                background-color: antiquewhite;
                border: 1px red solid;
                border-radius: 25px;
            }
        </style>
    </head>
    <body>
        <h1>画布canvas测试</h1>
        <canvas id="view" width="500px" height="500px"></canvas>
    </body>
    <script type="text/javascript">
        var conv=document.getElementById("view");
        var ctx=conv.getContext("2d");
 
        function drawBox(x,y,color){
            ctx.beginPath();//开始新的路径（丢弃当前路径）
            ctx.lineWidth=3;//线条宽度（单位：像素）
            ctx.moveTo(x,y);//起点坐标
            ctx.lineTo(x+100,y);//设置直线路径，终点坐标
            ctx.lineTo(x+100,y+100);
            ctx.lineTo(x,y+100);
            ctx.lineTo(x,y);
            ctx.strokeStyle="red";//设置路径颜色（先设置后绘制）
            ctx.stroke();//绘制路径
            ctx.fillStyle=color;//设置填充颜色
            ctx.fill();//填充路径（强制闭合）
        }//绘制函数
 
        drawBox(20,20,"#00FF00");
    </script>
</html>

使用rect方法：

ctx.beginPath();//开始新的路径
ctx.rect(20,20,100,100);//生成矩形路径，起点坐标（前两个参数）矩形大小（后两个参数）
ctx.stroke();//绘制路径

使用fillRect方法：

ctx.beginPath();//开始新路径
ctx.fillStyle="red";//默认填充黑色，通过fillStyle设置为红色
ctx.fillRect(20,20,100,100);//生成填充的矩形路径，参数同rect方法

使用strokeRect方法：

ctx.beginPath();//开始新路径
ctx.strokeRect(20,20,100,100);//设置路径并绘制，参数同前

使用clearRect方法清除矩形填充：

ctx.clearRect(20,20,50,50);//清除矩形填充,参数同前

特别说明：

1.绘制与填充：

绘制是指绘制设置好的路径，路径可以理解为无色的画笔走过，绘制沿着画笔走过的部分画上线条填充是填充内容，封闭图形才能填充，fill方法会强制封闭并填充

填充覆盖了绘制，可以先绘制后填充，但是不能先填充后绘制

2.clearRect方法只能清除已经填充的矩形区域，否则没有效果