canvas 圆角矩形，背景圆角矩形

//画布的圆角矩形

//   **
		//  * 绘制圆角矩形
		//* @param { Object } ctx - canvas组件的绘图上下文
		//* @param { Number } x - 矩形的x坐标
		//* @param { Number } y - 矩形的y坐标
		//* @param { Number } w - 矩形的宽度
		//* @param { Number } h - 矩形的高度
		//* @param { Number } r - 矩形的圆角半径
		//* @param { String } [c = 'transparent'] - 矩形的填充色
		//* /
		roundRect(ctx, x, y, w, h, r, c = '#fff') {
			if (w < 2 * r) { r = w / 2; }
			if (h < 2 * r) { r = h / 2; }

			ctx.beginPath();
			ctx.fillStyle = c;

			ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
			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, Math.PI * 1.5, Math.PI * 2);
			ctx.lineTo(x + w, y + h - r);
			ctx.lineTo(x + w - r, y + h);

			ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
			ctx.lineTo(x + r, y + h);
			ctx.lineTo(x, y + h - r);

			ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
			ctx.lineTo(x, y + r);
			ctx.lineTo(x + r, y);

			ctx.fill();
			ctx.closePath();
		},

	},

//引用
	this.roundRect(ctx, 0, 0, 257 * rpx, 449 * rpx, 10, "#fff")

//绘制圆角矩形（纯色填充)

roundRectColor: function (context, x, y, w, h, r) {  //绘制圆角矩形（纯色填充）
			context.save();
			context.setFillStyle("#CA493A");
			context.setStrokeStyle('#CA493A')
			context.setLineJoin('round');  //交点设置成圆角
			context.setLineWidth(r);
			context.strokeRect(x + r / 2, y + r / 2, w - r, h - r);
			context.fillRect(x + r, y + r, w - r * 2, h - r * 2);
			context.stroke();
			context.closePath();
		},

//引用

/*
var text=  '文字文字文字文字'						//	文字
var width = ctx.measureText(text).width	//获取文字的宽度
		width * rpx+15  是因为给后面添加上一定长度的空白

*/
var text=  '文字文字文字文字'						//	文字
var width = ctx.measureText(text).width	//获取文字的宽度
this.roundRectColor(ctx, 30 * rpx, 70 * rpx, width * rpx+15, 17 * rpx, 5);