HTML Canvas strokerect() 方法

在 HTML 的 Canvas 元素中，我们可以使用 strokerect() 方法来绘制一个空心的矩形。这个方法可以让我们在 Canvas 上绘制简单的图形，非常适合用于制作一些基本的图形或者边框效果。

语法

strokerect(x, y, width, height)

• x: 矩形左上角的 x 坐标
• y: 矩形左上角的 y 坐标
• width: 矩形的宽度
• height: 矩形的高度

参数说明

在使用 strokerect() 方法时，我们需要传入四个参数，分别是矩形的左上角坐标和矩形的宽度和高度。通过这些参数，我们可以在 Canvas 上绘制一个空心的矩形。

示例代码

下面是一个简单的示例代码，演示了如何在 Canvas 上绘制一个空心的矩形：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Canvas strokerect() 方法示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        
        ctx.strokeStyle = "red"; // 设置边框颜色为红色
        ctx.lineWidth = 2; // 设置边框宽度为2个像素
        ctx.strokeRect(20, 20, 150, 50); // 绘制一个空心矩形
    </script>
</body>
</html>

在这段示例代码中，我们首先获取了 Canvas 元素和其上下文对象，然后设置了边框的颜色和宽度，最后调用了 strokerect() 方法绘制了一个空心的矩形。

总结

通过 strokerect() 方法，我们可以在 Canvas 上绘制出简单的空心矩形，为我们的网页添加一些基本的图形效果。希望本文对你有所帮助，谢谢阅读！