canvas绘制图像后在图像上添加文本bug
发布于 6 年前 作者 fhou 4941 次浏览 来自 问答

微信小程序开发中,绘制一个图像,然后再图像上添加文本内容,开发工具中运行效果不显示文本内容。

test.wxml内容如下:

<view class=“classname”>

<canvas canvas-id=“brandCanvas” style=“width:100%”/>

</view>

test.js具体代码如下:

  onReady: function () {

    var phoneInfo = wx.getSystemInfoSync();

    var brand = “hello”;

    var ctx = wx.createCanvasContext(“brandCanvas”);

    var path = “…/…/imgs/dog.png”;

    ctx.drawImage(path, 0, 0, phoneInfo.windowWidth, phoneInfo.windowHeight);

    ctx.draw();

 

    ctx.setFontSize(30);

    ctx.setFillStyle("#ff0000");

    ctx.fillText(brand, phoneInfo.windowWidth*0.3, phoneInfo.windowHeight*0.05);

    ctx.draw(true);

  },

注意代码ctx.draw(true)必须要加参数true

以上运行效果在开发工具中不能看到文本内容,但是在真机测试中是OK的!

1 回复

可以试一下 Beta 版本的开发工具

回到顶部