Question

我遇到了craftyjs的问题：

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

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

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对于以不同的方式处理这些问题非常顽固。如果我能找到一个好的修复或解决方法，我会再次在这里发布。（更糟糕的情况是，我们可以在每次放大时重新绘制整个画布的重绘，但这样做会使性能下降。）

在缩放时的白线

1 个答案: