Raphael.js 圆角矩形（另一种解决方案） - JavaScript

Raphael.js 是一个流行的 JavaScript 库，用于创建矢量图形和动画。它提供了一套简单的 API，用于处理 SVG（可缩放矢量图形）和 VML（矢量标记语言）格式，从而使开发者可以轻松地在 Web 页面上创建复杂的图形。

在 Raphael.js 中，圆角矩形是一种常见的图形类型。Raphael 提供了两种方法来创建圆角矩形，一种是通过自定义属性 "rx" 和 "ry" 来指定圆角的半径，另一种是通过自定义图形方法来创建圆角矩形。

下面是一个使用 Raphael.js 创建圆角矩形的示例：

// 创建画布
var paper = Raphael(0, 0, 400, 400);

// 通过自定义属性创建圆角矩形
var rect = paper.rect(50, 50, 300, 200);
rect.attr({
    fill: "red",
    "stroke-width": 2,
    rx: 10, // 指定水平方向圆角的半径
    ry: 10  // 指定垂直方向圆角的半径
});

// 通过自定义图形方法创建圆角矩形
var roundRect = function (x, y, width, height, radius) {
    var path = ["M", x + radius, y,
                "L", x + width - radius, y,
                "Q", x + width, y, x + width, y + radius,
                "L", x + width, y + height - radius,
                "Q", x +  width, y + height, x + width - radius, y + height,
                "L", x + radius, y + height,
                "Q", x, y + height, x, y + height - radius,
                "L", x, y + radius,
                "Q", x, y, x + radius, y].join(" ");
    return paper.path(path);
};

roundRect(50, 300, 300, 100, 20).attr({
    fill: "blue",
    "stroke-width": 2
});

在上面的示例中，我们首先创建了一个画布，然后使用 rect() 方法创建了一个圆角矩形，并指定了圆角的半径。接着，我们使用 attr() 方法来设置矩形的样式属性，例如填充颜色和边框宽度。

另外，我们还定义了一个自定义图形方法 roundRect()，它接受圆角矩形的位置、宽度、高度和圆角半径作为参数，并返回一个圆角矩形路径。我们可以使用这个方法来创建更加灵活的圆角矩形。

以上就是使用 Raphael.js 创建圆角矩形的另一种解决方案。Raphael.js 还提供了很多其他的图形和动画功能，开发者可以根据自己的需求进一步探索和使用。

注意：以上示例中的代码需要在包含 Raphael.js 库的 HTML 页面中运行才能正常显示效果。

请确保你已经包含了 Raphael.js 库，并将上述代码片段插入到合适的位置，以在你的项目中创建圆角矩形。