HTML canvas strokeRect() 方法-JavaScript中文网-JavaScript教程资源分享门户

HTML canvas strokeRect() 方法

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

语法

strokeRect() 方法的语法如下：

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

参数说明：

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

示例

下面是一个简单的示例，演示如何使用 strokeRect() 方法在 Canvas 上绘制一个红色边框的矩形：

-- -------------------- ---- -------
--------- -----
------
------
  ------------- ------------ ----------
-------
------
  ------- ------------- ----------- ----------------------
  --------
    --- ------ - ------------------------------------
    --- --- - ------------------------
    
    --------------- - ------
    ------------------ --- ---- ----
  ---------
-------
-------

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

注意事项

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

总结

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

纠错
反馈