小编Flo*_*öck的帖子
HTML5画布渲染矩形的好奇bug(？)
我使用HTML5画布预渲染精灵,并遇到一些奇怪的行为,看起来像渲染错误.以下最小示例生成它:
var CT = document.getElementById("myCanvas").getContext("2d");
CT.scale(24, 24);
CT.translate(1.0717, 0.1);
CT.rect(0.2, 0.35, 0.4, 0.1);
CT.rect(-0.05, -0.05, 0.1, 1);
CT.translate(0.4, 0);
CT.rect(-0.05, -0.05, 0.5, 1);
CT.fill();<canvas id="myCanvas" width="50" height="30" style="border:1px solid #d3d3d3;"></canvas>看着生成的图像,我注意到水平条会干扰左侧垂直条纹,尽管它不会碰到它.更改几何体(例如,移除右侧垂直条),会以不可预测的方式更改(据我所见)的工件.
有没有人遇到过这个问题？什么可能导致它以及如何避免它？这让我很烦恼.行为发生在不同的浏览器中(我在IE11和Firefox Quantum上测试过).
如果不清楚,请查看最左侧矩形的最左侧像素列.指向红色箭头的像素比蓝色箭头指向的像素更暗,即使右边的其他2个矩形看起来像对左边的矩形完全没有影响.
6
推荐指数
推荐指数
1
解决办法
解决办法
138
查看次数
查看次数