收藏
回答

canvas 2D 背景图片覆盖文字的问题?

我希望背景图片置于文字下方,但是一旦写了文字和图片,图片就会覆盖掉文字,不知道有没有什么方法可以安排一下图片和文字的优先级顺序?

js:

wx.createSelectorQuery()
      .select('#canvas')
      .fields({
        node: true,
        size: true
      })
      .exec(async (res) => {
        const canvas = res[0].node;
        // Canvas 绘制上下文
        const ctx = canvas.getContext('2d');


        //画布大小根据屏幕分辨率进行缩放,防止模糊
        const renderWidth = res[0].width
        const renderHeight = res[0].height


        // 初始化画布大熊啊
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = renderWidth*dpr
        canvas.height = renderHeight*dpr
        ctx.scale(dpr, dpr)


        //画布背景色
        //ctx.fillStyle = "pink";
        //ctx.fillRect(0, 0, canvas.width, canvas.height)


         //画图片
        const image = canvas.createImage()
        image.src = "图片地址"
        image.onload = ()=>{
          ctx.drawImage(image,100,10,414,650)
        }

        // 标题
        ctx.font= 'normal bold 15px sans-serif'
        ctx.textAligh = "center"
        ctx.textBaseline = "middle"
        ctx.fillText('这是一个测试',100,100)


        ctx.font= 'normal bold 15px sans-serif'
        ctx.fillText('这是二个测试',200,100)
      })

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

1 个回答

  • |夏天|先生
    |夏天|先生
    2022-09-15

    你可以把文字放在onLoad中的drawImage后面试试

    2022-09-15
    有用 1
    回复 2
    • 景霖
      景霖
      2022-09-15
      那么请问  如果是图片顺序的优先级  应该怎么弄呢?
      2022-09-15
      回复
    • |夏天|先生
      |夏天|先生
      2022-09-15回复景霖
      可以使用Promise把image.onload封装成一个函数,同步调用
      2022-09-15
      回复
登录 后发表内容