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>