CanvasRenderingContext2D: roundRect() 方法

基线 2023

新功能

自 2023 年 4 月起，此功能在最新的设备和浏览器版本上都能正常运行。此功能可能无法在较旧的设备或浏览器上运行。

**CanvasRenderingContext2D.roundRect()** 方法是 Canvas 2D API 中添加一个圆角矩形到当前路径的方法。

圆角的半径可以使用与 CSS border-radius 属性相同的方式指定。

与其他修改当前路径的方法一样，此方法不会直接渲染任何内容。要将圆角矩形绘制到画布上，可以使用 fill() 或 stroke() 方法。

语法

js
roundRect(x, y, width, height, radii)

参数

x

矩形起点在 x 轴上的坐标，以像素为单位。

y

矩形起点在 y 轴上的坐标，以像素为单位。

width

矩形的宽度。正值表示向右，负值表示向左。

height

矩形的高度。正值表示向下，负值表示向上。

radii

一个数字或列表，指定用于矩形角部的圆弧半径。当 width 和 height 为正时，半径的个数和顺序与 border-radius CSS 属性相同。

  • 所有角
  • [所有角]
  • [左上角和右下角，右上角和左下角]
  • [左上角，右上角和左下角，右下角]
  • [左上角，右上角，右下角，左下角]

如果 width 为负，则圆角矩形会水平翻转，因此通常应用于左上角的半径值将应用于右上角，反之亦然。类似地，当 height 为负时，圆角矩形会垂直翻转。如果任何边比两端顶点半径的总和短，则指定的半径可能会按比例缩小。

radii 参数也可以是 DOMPoint 或 DOMPointReadOnly 实例，或者是一个包含相同属性的（{x: 0, y: 0}）对象，或者是一个此类对象的列表，或者是一个混合了数字和此类对象的列表。

返回值

无 (undefined).

异常

RangeError

如果 radii 是一个包含零个或四个以上元素的列表，或者如果其某个值是负数。

示例

绘制矩形

此示例使用 roundRect() 方法创建多个圆角矩形路径。然后使用 stroke() 方法渲染这些路径。

HTML

html
<canvas id="canvas" width="700" height="300"></canvas>

JavaScript

首先，我们创建一个用于绘制圆角矩形的上下文。

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

以下代码绘制了两个矩形，这两个矩形都从 (10, 20) 点开始，宽度为 150，高度为 100。第一个矩形以红色绘制，并使用数字作为参数指定所有角部的半径为零。第二个矩形以蓝色绘制，并指定一个元素为 40 像素半径的列表。

js
// Rounded rectangle with zero radius (specified as a number)
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.roundRect(10, 20, 150, 100, 0);
ctx.stroke();

// Rounded rectangle with 40px radius (single element list)
ctx.strokeStyle = "blue";
ctx.beginPath();
ctx.roundRect(10, 20, 150, 100, [40]);
ctx.stroke();

在先前矩形下方，我们绘制了另一个橙色的矩形，该矩形指定了相对角部的半径值。

js
// Rounded rectangle with 2 different radii
ctx.strokeStyle = "orange";
ctx.beginPath();
ctx.roundRect(10, 150, 150, 100, [10, 40]);
ctx.stroke();

最后，我们绘制了两个圆角矩形，这些矩形具有四个半径值和相同的起点。区别在于，第二个矩形的宽度为负。

js
// Rounded rectangle with four different radii
ctx.strokeStyle = "green";
ctx.beginPath();
ctx.roundRect(400, 20, 200, 100, [0, 30, 50, 60]);
ctx.stroke();

// Same rectangle drawn backwards
ctx.strokeStyle = "magenta";
ctx.beginPath();
ctx.roundRect(400, 150, -200, 100, [0, 30, 50, 60]);
ctx.stroke();

结果

结果如下所示。对于右侧的两个矩形，请注意底部矩形是如何使用负宽度绘制的，以及这如何使矩形水平翻转。

规范

规范
HTML 标准
# dom-context-2d-roundrect

浏览器兼容性

BCD 表格只能在启用 JavaScript 的浏览器中加载。

另请参阅