如何使用畫布繪製圓角按鈕？

Question

我想用畫布繪製一個圓形的按鈕，怎麼辦？

Answer 1

矩形沒有內置功能。但是，你可以自己繪製他們arcTo，像這樣（demo）：

function drawRoundButton(ctx, x, y, width, height, arcsize) { 
    ctx.beginPath(); 
    ctx.moveTo(x+arcsize, y); 
    ctx.lineTo(x+width-arcsize, y); 
    ctx.arcTo(x+width, y, x+width, y+arcsize, arcsize); 
    ctx.lineTo(x+width,y+height-arcsize); 
    ctx.arcTo(x+width, y+height, x+width-arcsize, y+height, arcsize); 
    ctx.lineTo(x+arcsize, y+height); 
    ctx.arcTo(x, y+height, x, y-arcsize, arcsize); 
    ctx.lineTo(x, y+arcsize); 
    ctx.arcTo(x, y, x+arcsize, y, arcsize); 
    ctx.lineTo(x+arcsize, y); 
    ctx.stroke(); 
    ctx.fill(); 
}