canvas圆角矩形/边框/图片

// 圆角矩形
roundRect(ctx, x, y, w, h, r) {
				ctx.save()
				ctx.beginPath()
				// 左上弧线
				ctx.arc(x + r, y + r, r, 1 * Math.PI, 1.5 * Math.PI)
				// 左直线
				ctx.moveTo(x, y + r)
				ctx.lineTo(x, y + h - r)
				// 左下弧线
				ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, 1 * Math.PI)
				// 下直线
				ctx.lineTo(x + r, y + h)
				ctx.lineTo(x + w - r, y + h)
				// 右下弧线
				ctx.arc(x + w - r, y + h - r, r, 0 * Math.PI, 0.5 * Math.PI)
				// 右直线
				ctx.lineTo(x + w, y + h - r)
				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 - r, y)
				ctx.lineTo(x + r, y)
				ctx.setStrokeStyle(bg);
				ctx.setFillStyle('white')
				ctx.fill()
			},

// 圆角边框
roundRect(ctx, x, y, w, h, r) {
			    ctx.save();
			    if (w < 2 * r) {r = w / 2;}
			    if (h < 2 * r){ r = h / 2;}
			    ctx.beginPath();
			    ctx.setStrokeStyle('white');
			    ctx.setFillStyle('white')
			    ctx.setLineWidth(4);
			    ctx.moveTo(x+r, y);
			    ctx.arcTo(x+w, y, x+w, y+h, r);
			    ctx.arcTo(x+w, y+h, x, y+h, r);
			    ctx.arcTo(x, y+h, x, y, r);
			    ctx.arcTo(x, y, x+w, y, r);
			    ctx.stroke();
			    ctx.closePath();
			    ctx.draw(true);
			},

// 圆角图片
roundImg(ctx, img, x, y, r) {
			    ctx.save();
			    var d =2 * r;
			    var cx = x + r;
			    var cy = y + r;
			    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
			    ctx.clip();
			    ctx.drawImage(img, x, y, d, d);
			    ctx.restore();
			},