收藏
回答

怎么在用canvas中用drawImage引入图片,然后在图片上写字?

问题模块
API和组件

怎么在用canvas中用drawImage引入图片,然后在图片上写字?

最后一次编辑于  2017-10-30  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

12 个回答

  • 雨轩
    雨轩
    2017-10-30

            ctx.setFillStyle('black')

            ctx.setTextAlign('left')

            ctx.setFontSize(12)

            ctx.fillText('正在阅读', (50 * width01) + name_le + le , 540 * height01)


    2017-10-30
    赞同
    回复
  • 雨轩
    雨轩
    2017-10-30

    在真机上是有用的。在模拟器上文字会被盖到图片下面,显示不正常。

    2017-10-30
    赞同
    回复
  • 雨轩
    雨轩
    2017-10-30

            tempFilePaths = res.tempFilePath

            console.log("width01", width01)

            ctx.drawImage(

             tempFilePaths, 0, 0, 375 * width01, (557 * height01)-1

            )


    2017-10-30
    赞同
    回复
  • 已无风雨已无晴
    已无风雨已无晴
    2017-10-30

    谢谢你的回答

    我想要的效果是,先用drawImage引入图片画在canvas上面,然后在图片上写字。

    2017-10-30
    赞同
    回复
  • 已无风雨已无晴
    已无风雨已无晴
    2017-10-30

    在引入img的canvas上图片区域写字

    2017-10-30
    赞同
    回复
  • 雨轩
    雨轩
    2017-10-30

    对呀就是这样啊,

    2017-10-30
    赞同
    回复
  • 雨轩
    雨轩
    2017-10-30

    先用     ctx.drawImage(
              tempFilePaths, 0, 0, 375 * width01, (557 * height01)-1
            )

    放入图片。

    然后         console.log("第一步")
            ctx.setFillStyle('#FF6A00')
            ctx.setTextAlign('center')
            ctx.setFontSize(12)
            ctx.fillText(nickName, (50 * width01) + name_le / 2 + (le / 2), 540 * height01)

    然后盖上文字。

    最后

    ctx.draw()


    2017-10-30
    赞同
    回复
  • 已无风雨已无晴
    已无风雨已无晴
    2017-10-30

    谢谢你 我研究下,不懂的话再请教您

    2017-10-30
    赞同
    回复
  • 已无风雨已无晴
    已无风雨已无晴
    2017-10-30

    大神兄弟,谢谢你! 真机可以出来,模拟器不行! 还遇到了个问题,canvas文字可以自己换行吗?

    2017-10-30
    赞同
    回复
  • 白开水
    白开水
    2017-10-31

    canvas 只会画单行文字

    2017-10-31
    赞同
    回复