canvas的fillRect函数计算出来的像素值显示不正确，并且真机调试不显示且报错
当真机调试断开后，手机可以看到像开发工具里面的样子，按理说红色区域的左上角离上面和左面的距离应该是一样的，但是显示却不是这样的，希望解答一下
复现代码已贴出，点击链接即可查看
1 回复
我今天又反复测试了一下，发现你们官方人员对画布封装的有问题，只有当canvas的高和宽的比值为1：2的时候像素值才能计算正确，只要不是这个比值关系，都会计算错误，但这是有问题的，在实际应用中根本运用不起来
请看一下示例：
示例一
wxml:
<canvas class="canvas1" type="2d" style="height:200px;width:400px;background-color:#f1f1f1"></canvas>
wxjs:
onShow: function () {
wx.createSelectorQuery().select(".canvas1").node(res=>{
console.log(res)
var canvas = res.node
var x = canvas.getContext('2d')
x.fillStyle = "red"
x.rect(10, 10, 150, 40)
x.fill()
}).exec()
},
示例二
wxml:
<canvas class="canvas1" type="2d" style="height:400px;width:400px;background-color:#f1f1f1"></canvas>
wxjs:
onShow: function () {
wx.createSelectorQuery().select(".canvas1").node(res=>{
console.log(res)
var canvas = res.node
var x = canvas.getContext('2d')
x.fillStyle = "red"
x.rect(10, 10, 150, 40)
x.fill()
}).exec()
},
示例三
wxml:
<canvas class="canvas1" type="2d" style="height:100px;width:400px;background-color:#f1f1f1"></canvas>
wxjs:
onShow: function () {
wx.createSelectorQuery().select(".canvas1").node(res=>{
console.log(res)
var canvas = res.node
var x = canvas.getContext('2d')
x.fillStyle = "red"
x.rect(10, 10, 150, 40)
x.fill()
}).exec()
},
强力驱动