Javascript 如何在矩形中绘制圆角'；s底部svg JS

我想画一个只有底部圆角的矩形，而不使用HTML5 SVG元素的外部源代码。有人能帮忙吗？。我已经附上了预期的输出

谢谢，

---

Bharathi

下面是一个名为

makeShape

的函数，用于绘制所需的形状。输入参数为x（即左侧）、y（即顶部）、宽度、高度和r（即角半径）。它返回一个svg路径元素

要了解更多信息，您可以咨询，以及有关的具体信息

下面的演示创建具有随机位置和尺寸的形状，包括随机角半径。代码中的注释解释了这是如何实现的

//形状创建函数
var makeShape=函数（x，y，宽度，高度，r）{
var xmlns=”http://www.w3.org/2000/svg";
变量
spc=“”，//具有可读名称的路径绘制指令字母
moveTo=“M”，
horizLineTo=“h”，
vertLineTo=“v”，
arcTo=“a”，
closePath=“z”；
var dStr=//svg路径的“d”路径
移动到+spc+x+spc+y+spc+
垂直线至+spc+（高度-r）+spc+
arcTo+spc+r+spc+r+spc+0+spc+0+spc+0+spc+r+spc+r+spc+r+spc+
水平线至+spc+（宽度-2*r）+spc+
arcTo+spc+r+spc+r+spc+0+spc+0+spc+0+spc+r+spc+（-r）+spc+
vertLineTo+spc+（r-高度）+spc+
封闭路径；
var shape=document.createElementNS（xmlns，“path”）；//创建（孤立的）svg路径元素
setAttribute（“d”，dStr）；//将“d”属性添加到路径中，给它一个形状
return shape；//从函数返回
};
//用于创建随机定位和比例示例形状的演示代码
document.querySelector（“按钮”）.addEventListener（“单击”，函数）（）{
var path=document.querySelector（“path”）；//如果以前存在任何路径，请删除它们
if（path）{path.parentNode.removeChild（path）；}
var x=Math.random（）*140+10；//计算形状的随机位置和比例
var y=Math.random（）*65+10；
可变宽度=400-x*2；
变量高度=150-y*2；
var r=Math.random（）*Math.min（宽度/2，高度）；//角半径
var shape=makeShape（x，y，宽度，高度，r）；//创建孤立形状
shape.setAttribute（“笔划”、“灰色”）；//设置其外观样式
setAttribute（“填充”、“红色”）；
setAttribute（“笔划宽度”、“4”）；
document.querySelector（“svg”）.appendChild（shape）；//将该形状添加到svg DOM中
});

绘制随机形状