JavaScript-绘制曲线矩形的功能

Question

我正在尝试编写一个函数，该功能在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);

Answer 1

这是因为，您在此行中有一个不必要的方括号(](

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

导致代码中断

var c = document.getElementById('canvas');
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(60, 60, 175, 175);

canvas {
  border: 1px solid black;
}

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