圆角无法在 HTML5 画布上正确呈现

Question

有谁知道为什么圆角看起来不对？

ctx.beginPath();
        ctx.moveTo(x + this.cornerRadius, y);
        ctx.lineTo(x + thisWidth - this.cornerRadius, y);
        ctx.quadraticCurveTo(x + thisWidth, y, x + thisWidth, y + this.cornerRadius);
        ctx.lineTo(x + thisWidth, y + thisHeight - this.cornerRadius);
        ctx.quadraticCurveTo(x + thisWidth, y + thisHeight, x + thisWidth - this.cornerRadius, y + thisHeight, this.cornerRadius);
        ctx.lineTo(x + this.cornerRadius, y + thisHeight);
        ctx.quadraticCurveTo(x, y + thisHeight, x, y + this.height - this.cornerRadius);
        ctx.lineTo(x, y + this.cornerRadius);
        ctx.quadraticCurveTo(x, y, x + this.cornerRadius, y);
  ctx.closePath();

Answer 1

canvas = document.getElementById('a');
ctx = canvas.getContext('2d');
function roundedRect(x,y,w,h,radius){
    ctx.moveTo(x+radius,y);
    ctx.lineTo(x+w-radius,y);
    ctx.arcTo(x+w,y,x+w,y+radius,radius);
    ctx.lineTo(x+w,y+h-radius);
    ctx.arcTo(x+w,y+h,x+w-radius,y+h,radius);
    ctx.lineTo(x+radius,y+h);
    ctx.arcTo(x,y+h,x,y+h-radius,radius);
    ctx.lineTo(x,y+radius);
    ctx.arcTo(x,y,x+radius,y,radius);    
    ctx.stroke();
}
roundedRect(100,50,100,100,10);

arcTo 方法就是为了这些目的而创建的。 此处了解 arcTo 方法。 （MDN 上没有很好的文档或示例）
此处演示