缩放时的白线

Question

我在使用 craftyjs 时遇到了这个问题：

当我尝试缩放视口（画布）时，对象周围出现白线（背景颜色）。

我认为这是因为半像素，但我似乎无法找到解决此问题的方法。 有谁知道该怎么做？

编辑：小提琴： http://jsfiddle.net/ysDtQ/44/

Crafty.init(960,540);
Crafty.canvas.init();  
Crafty.scene("loading", function() {
Crafty.background("#000");
Crafty.sprite(1200,768,"http://us.123rf.com/400wm/400/400/criminalatt/criminalatt1010/criminalatt101000007/8072257-gras-textuur-straight.jpg", {background : [0,0]});
Crafty.sprite(150,150,"http://www.fpmheemskerk.com/STooNeD.png",{stoo:[0,0]});
Crafty.e('2D, Canvas, background').attr({x:0, y:0, w:1200, h:798, z:1, alpha:1});
Crafty.e('2D, Canvas, stoo').attr({x:0, y:0, w:150, h:150, z:2, alpha:1}).bind("EnterFrame",function(){this.x += 0.01;});
Crafty.viewport.scale(1.51111);
});
Crafty.scene("loading");`

但在我的代码中，我将 x 位置四舍五入，所以它们始终是圆形的

Answer 1

当画布应用了缩放变换时，clearRect、clip 和 drawImage 以不同方式处理半像素似乎是一个问题。

当单个精灵在背景上移动时，我们清除它移动经过的区域，剪辑到该区域，然后绘制所有重叠的实体。

在这种情况下，清除操作似乎比绘制操作影响更多的像素。我能够在 Chrome 中解决这个问题，但 Firefox 非常固执地对待这些不同的方式。如果我能找到一个好的修复或解决方法，我会再次在这里发布。 （更糟糕的情况是，我们可以在每次缩放时重新绘制整个画布，但这会影响性能。）