HTML canvas strokeRect() 方法

HTML Canvas 是一个强大的绘图工具，可以通过 JavaScript 在网页上绘制各种图形。其中，strokeRect() 方法是用来在 Canvas 上绘制矩形边框的方法。本文将详细介绍 strokeRect() 方法的用法及示例代码。

语法

strokeRect() 方法的语法如下：

context.strokeRect(x, y, width, height);

参数说明：

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

示例

下面是一个简单的示例，演示如何使用 strokeRect() 方法在 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.strokeRect(10, 10, 180, 80);
  </script>
</body>
</html>

在上面的示例中，我们首先获取了 Canvas 元素和其上下文对象，然后设置边框颜色为红色，并调用 strokeRect() 方法绘制了一个左上角坐标为 (10, 10)，宽度为 180，高度为 80 的矩形。

注意事项

• 如果要绘制实心矩形，可以使用 fillRect() 方法；
• 可以通过设置 lineWidth 属性来调整边框的宽度；
• 可以通过设置 lineCap 和 lineJoin 属性来调整边框的端点和连接处的样式。

总结

通过本文的介绍，你应该已经了解了 HTML Canvas 的 strokeRect() 方法的基本用法。希望这篇文章对你有所帮助，欢迎继续深入学习 Canvas 绘图技术！