canvas画布 矩形圆角

canva 画布圆角


function drawRoundRect(ctx, x, y, width, height, radius){    
	ctx.beginPath();    
	ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);    
	ctx.lineTo(width - radius + x, y);    
	ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);    
	ctx.lineTo(width + x, height + y - radius);    
	ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);    
	ctx.lineTo(radius + x, height +y);    
	ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);    
	ctx.closePath();    
}

调用方法

var canvas = document.getElementById('cvs');
canvas.width = drawdata.boardwidth;//画布大小
canvas.height = drawdata.boardheight;//画布大小
var ctx = canvas.getContext("2d");

drawRoundRect(ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度);

drawRoundRect(ctx, 300, 200, 150, 80, 6);