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);
canvas画布 矩形圆角
最新推荐文章于 2024-01-03 00:30:00 发布