收藏
回答

canvas矩形填充背景色影响文字显示?



想问一下,这种填充背景色会盖掉文字显示的怎么办

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


回答关注问题邀请回答
收藏

2 个回答

  • Fanacr
    Fanacr
    2019-11-25

    没人么

    2019-11-25
    有用
    回复
  • 王浩Hanks🇨🇳
    王浩Hanks🇨🇳
    2019-11-25

    层级关系,先填充背景色,然后再绘制文字

    2019-11-25
    有用
    回复 3
    • Fanacr
      Fanacr
      2019-11-25
      我之前就是先背景色 还是一样的盖住 我才想着 画框子 包住文字
      2019-11-25
      回复
    • 王浩Hanks🇨🇳
      王浩Hanks🇨🇳
      2019-11-25回复Fanacr
      先背景色,试试.save()?
      2019-11-25
      回复
    • Fanacr
      Fanacr
      2019-11-25
      我换成filltext了就不会被盖住了
      2019-11-25
      回复
登录 后发表内容
问题标签