canvas 绘制圆角 消除创建区域

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