//画布的圆角矩形
// **// * 绘制圆角矩形//* @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);
