캔버스를 사용하여 둥근 버튼을 그리는 방법은 무엇입니까?

Question

캔버스를 사용하여 둥근 버튼을 그려보고 싶습니다. 어떻게해야할까요?

Answer 1

사각형에는 기본 제공 기능이 없습니다. 그러나이 (demo)처럼 arcTo로 직접 그릴 수 있습니다 :

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(); 
}