Javascript-用于绘制曲线矩形的函数

我试图编写一个函数，在html画布中绘制一个具有给定xy坐标、宽度和高度的曲线矩形，但我的脚本当前输出一个空白画布。为什么代码没有绘制矩形

var c=document.getElementById(id);
var ctx=c.getContext('2d');

function makeCurvedRect(x, y, w, h) {
    ctx.beginPath();
    ctx.moveTo(x+10, y);
    ctx.lineTo(x+w-10, y);
    ctx.quadraticCurveTo(x+w, y, x+w, y+10);
    ctx.lineTo(x+w, y+h-10);
    ctx.quadraticCurveTo(x+w, y+h, x+w-10, y+h);
    ctx.lineTo(x+10, y+h);
    ctx.quadraticCurveTo(x, y+h, x, y+h - 10]);
    ctx.lineTo(x, y+10);
    ctx.quadraticCurveTo(x, y, x+10, y);
    ctx.stroke();
}

makeCurvedRect(162.5,40,175,175);

---

这是因为，在这一行有一个不必要的方括号（

]

）

ctx.quadraticCurveTo(x, y+h, x, y+h - 10]);
                                        ^ this

这会导致代码中断

var c=document.getElementById（'canvas'）；
var ctx=c.getContext（'2d'）；
函数makeCurvedRect（x，y，w，h）{
ctx.beginPath（）；
ctx.移动到（x+10，y）；
ctx.lineTo（x+w-10，y）；
ctx.二次曲线（x+w，y，x+w，y+10）；
ctx.lineTo（x+w，y+h-10）；
四次曲线（x+w，y+h，x+w-10，y+h）；
ctx.lineTo（x+10，y+h）；
四次曲线（x，y+h，x，y+h-10）；
ctx.lineTo（x，y+10）；
ctx.二次曲线（x，y，x+10，y）；
ctx.stroke（）；
}
makeCurvedRect（60,60,175,175）
画布{
边框：1px纯黑；
}
这是因为在这行有一个不必要的方括号（
]
）

ctx.quadraticCurveTo(x, y+h, x, y+h - 10]);
                                        ^ this

这会导致代码中断


var c=document.getElementById（'canvas'）；
var ctx=c.getContext（'2d'）；
函数makeCurvedRect（x，y，w，h）{
ctx.beginPath（）；
ctx.移动到（x+10，y）；
ctx.lineTo（x+w-10，y）；
ctx.二次曲线（x+w，y，x+w，y+10）；
ctx.lineTo（x+w，y+h-10）；
四次曲线（x+w，y+h，x+w-10，y+h）；
ctx.lineTo（x+10，y+h）；
四次曲线（x，y+h，x，y+h-10）；
ctx.lineTo（x，y+10）；
ctx.二次曲线（x，y，x+10，y）；
ctx.stroke（）；
}
makeCurvedRect（60,60,175,175）
画布{
边框：1px纯黑；
}
看起来您在ctx.quadraticCurveTo（x，y+h，x，y+h-10）行有语法错误；让我们删除“]”，然后再试一次，似乎您在ctx.quadraticCurveTo（x，y+h，x，y+h-10）行有语法错误；让我们删除“]”，然后重试