canvas 2d 在华为Nova2下,如果设置画布的宽高相等,绘制的图形位置会偏移。暂未发现其他机型有此问题。
微信客户端:7.0.9
设备型号:华为Nova2
画布长宽不相等时,绘制的图形正常显示:wx.createSelectorQuery().select(
"#canvas"
).fields({
node:
true
,
size:
true
}).exec(res => {
const canvas = res[0].node;
const ctx = canvas.getContext(
'2d'
);
const dpr = wx.getSystemInfoSync().pixelRatio;
canvas.width = res[0].width * dpr;
canvas.height = res[0].height * dpr;
ctx.scale(dpr, dpr);
ctx.fillStyle =
"#f00"
;
ctx.fillRect(20, 20, 160, 160);
ctx.fillStyle =
"#0f0"
;
ctx.fillRect(40, 40, 160, 160);
});
< canvas type = "2d" id = "canvas" style = "width: 200px; height:201px; border: 1px solid yellowgreen;" ></ canvas > |
画布长宽相等时,绘制的图形位置偏移:
< canvas type = "2d" id = "canvas" style = "width: 200px; height:200px; border: 1px solid yellowgreen;" ></ canvas > |
麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
另外,请扫描下图贴一下截图