android 页面高度发生变化后,canvas显示异常 - WXOPEN Club

<view style="height:{{mHeight||0}}px;"> </view>

<canvas id="mCanvas" type="2d" style="height:100px;width:100px"></canvas>

const {

pixelRatio

} = wx.getSystemInfoSync();

wx.createSelectorQuery().select("#mCanvas").fields({

node: true,

size: true

}).exec(([{

node,

width,

height

}]) => {

const ctx = node.getContext("2d");

node.width = width * pixelRatio;

node.height = height * pixelRatio;

ctx.scale(pixelRatio, pixelRatio);

ctx.beginPath();

ctx.arc(50, 50, 50, 0, 2 * Math.PI);

ctx.closePath();

ctx.stroke();

this.setData({ mHeight: 20 });

});

模拟器显示效果：

真机实际结果：

只能在Android真机上复现,测试机型：魅族16th flyme8.0.0.0A，华为 honor 8 lite PRA-AL00 8.0.0.348。

规避办法：

每次setData后重绘canvas。

fyu 1楼•5 年前

问题已知，后续版本修复这个问题