微信小程序开发中,绘制一个图像,然后再图像上添加文本内容,开发工具中运行效果不显示文本内容。
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的!