收藏
回答

canvas-2d绘制文字会被图片遮盖要怎么解决?

需求:在一张底背景图上加一些文字

现状:先调用drawImage绘制一张图,然后调用fillText,绘制的文字,总是在最底下,被底背景图盖住

最后一次编辑于  2020-06-01
回答关注问题邀请回答
收藏

4 个回答

  • super
    super
    10-19

    这个原因是因为,你加载图片的同时 执行下面的代码(绘制文字)了,将绘制文字的代码 放到加载图片之后就可以了。

    10-19
    有用
    回复
  • allen-黄河水
    allen-黄河水
    2020-06-01

    用ctx.save()和ctx.restore()来分隔你绘制的上下文,绘制文字相关的样式设置和配置都夹在这两者之间,并保证这部分放在你drawImage之后,这里考虑到有可能用了downloadFile下载图片,把绘制文字的部分也放到downloadFile的回调里面。因为downloadFile是个异步过程。

    2020-06-01
    有用
    回复 6
    • 等风来
      等风来
      2020-06-01
      确实是没有保存上下文导致的,异步的处理我放在了promise里。谢谢解答
      2020-06-01
      2
      回复
    • 等风来
      等风来
      2020-06-01
      这里还有一个问题请教一下,是不是canvas-2d 绘制图片 要在 image.onload 回调中进行?
      2020-06-01
      回复
    • allen-黄河水
      allen-黄河水
      2020-06-01回复等风来
      是的,canvas-2d,的风格是符合web规范的,image.onload方法是为了拿到image对象。但是canvas-2d新接口还在公测阶段,经常会出问题,建议如果用作生产的话还是使用老的canvas接口。
      2020-06-01
      回复
    • 等风来
      等风来
      2020-06-01
      原本是打算测试完直接上正式的,你这样说。那canvas-2d就先做个备胎吧
      2020-06-01
      回复
    • allen-黄河水
      allen-黄河水
      2020-06-01回复等风来
      我曾经也是像你这么想的,后来踩了大坑😂
      2020-06-01
      回复
    查看更多(1)
  • 默
    2020-06-01

    closePath() 了解一下


    2020-06-01
    有用
    回复
  • 等风来
    等风来
    2020-06-01
    ctx.drawImage(image, x, y, width, height);
    ctx.fillStyle = fillStyle;
    ctx.font = font;
    ctx.fillText(text, x, y);
    
    2020-06-01
    有用
    回复 3
    • 等风来
      等风来
      2020-06-01
      解决办法:
      2020-06-01
      回复
    • AKKO
      AKKO
      2020-12-17回复等风来
      你好 我按照你的方法来  文字还是没有出来 方便帮我看一下为什么吗
      2020-12-17
      回复
    • 等风来
      等风来
      2020-12-21回复AKKO
      方便提供下demo吗?你这样说,我也不知道是什么问题
      2020-12-21
      回复
登录 后发表内容
问题标签