ctx.save();//保存上下文之后用来恢复
var yuan=20;
this.handleBorderRect(ctx, 0,0, width, height,yuan );
ctx.clip();//裁剪区域,裁剪后之后所有内容只能在区域里
ctx.setFillStyle('#fff') //背景颜色
ctx.fillRect(0, 0, width, height)//填充颜色
ctx.restore();/// 恢复之前保存的画布状态,剪切区域被清除
handleBorderRect(ctx, x, y, w, h, r) {
ctx.beginPath();
// 左上角
ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.lineTo(x + w, y + r);
// 右上角
ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI);
ctx.lineTo(x + w, y + h - r);
ctx.lineTo(x + w - r, y + h);
// 右下角
ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
ctx.lineTo(x + r, y + h);
ctx.lineTo(x, y + h - r);
// 左下角
ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI);
ctx.lineTo(x, y + r);
ctx.lineTo(x + r, y);
ctx.fill();
ctx.closePath();
},
canvas 绘制圆角 消除创建区域
最新推荐文章于 2024-08-18 10:54:05 发布