想问一下，这种填充背景色会盖掉文字显示的怎么办
var bdRadius =11; var textPadding = 15; var boxHeight = 22; var boxWidth =82; ctx.stroke(); ctx.strokeText(discountText, 97, 255); this.roundRect(ctx, 82, 241, boxWidth, boxHeight, bdRadius, bdBackground, bdColor) |
roundRect(ctx, x, y, w, h, r, fillColor, strokeColor) { // 画圆角 ctx、x起点、y起点、w宽度、y高度、r圆角半径、fillColor填充颜色、strokeColor边框颜色 // 开始绘制 ctx.beginPath() // 绘制左上角圆弧 Math.PI = 180度 // 圆心x起点、圆心y起点、半径、以3点钟方向顺时针旋转后确认的起始弧度、以3点钟方向顺时针旋转后确认的终止弧度 ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5) // 绘制border-top // 移动起点位置 x终点、y终点 ctx.moveTo(x + r, y) // 画一条线 x终点、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) // 绘制border-right 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) // 绘制border-bottom 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) // 绘制border-left ctx.lineTo(x, y + r) // ctx.lineTo(x + r, y) if (fillColor) { // 因为边缘描边存在锯齿，最好指定使用 transparent 填充 ctx.setFillStyle(fillColor) // 对绘画区域填充 ctx.fill() } if (strokeColor) { // 因为边缘描边存在锯齿，最好指定使用 transparent 填充 ctx.setStrokeStyle(strokeColor) // 画出当前路径的边框 ctx.stroke() } // 关闭一个路径 // ctx.closePath() // 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore ctx.clip() }, |
没人么
层级关系，先填充背景色，然后再绘制文字