圓角無法在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上沒有很好的文檔或示例） 此處的演示