Javascript HTML5画布图像在自身重复复制时会变得模糊

我在滚动平铺图像时遇到这个问题，但仅在移动（android）浏览器上

图像是通过在其自身上重新绘制而“滚动”的，我有一个使用屏幕外缓冲区的版本，但没有区别。坐标被解析为整数，因为触摸事件会产生浮动。如果不这样做，效果会更糟。画布宽度/高度属性设置为等于css样式的宽度/高度，因此画布不会缩放

当我使用下面的代码在touchmove事件之后反复滚动画布时，在mobile chrome浏览器上渲染的图像变得越来越模糊，而在桌面浏览器上则不是这样。 看到附图，中间的瓦片受到影响，边框中的瓦片重新绘制。

我做错了什么？还有其他滚动画布的方法吗

worldRenderer.prototype.offset = function(dx,dy) {

    dx = parseInt(dx);
    dy = parseInt(dy)

    this.ctx.drawImage(this.canvas, dx, dy);

    var obounds = this.calcVisible();
    this.options.offsetx += dx;
    this.options.offsety += dy;
    var bounds = this.calcVisible();
    var x0 = bounds[0];
    var x1 = bounds[2];

    if (dx>0) {
        this.paintRect(this.ctx, [bounds[0],bounds[1],obounds[0],bounds[3]]);
        x0=obounds[0];
    } else if (dx<0) {
        this.paintRect(this.ctx, [obounds[2],bounds[1],bounds[2],bounds[3]]);
        x1=obounds[2];
    }
    if (dy>0) {
        this.paintRect(this.ctx, [x0,bounds[1],x1,obounds[1]] );
    } else if (dy<0) {
        this.paintRect(this.ctx, [x0,obounds[3],x1,bounds[3]]) ;
    }
}

worldRenderer.prototype.offset=函数（dx，dy）{
dx=parseInt（dx）；
dy=parseInt（dy）
this.ctx.drawImage（this.canvas，dx，dy）；
var obounds=this.calcVisible（）；
this.options.offsetx+=dx；
this.options.offsety+=dy；
var bounds=this.calcVisible（）；
var x0=界限[0]；
var x1=界限[2]；
如果（dx>0）{
this.paintRect（this.ctx[bounds[0]，bounds[1]，obounds[0]，bounds[3]）；
x0=obounds[0]；
}else if（dx0）{
this.paintRect（this.ctx[x0，bounds[1]，x1，obounds[1]）；
}否则，如果（这可能是因为抗锯齿，最简单的解决方案是在重新绘制之前将clearRect（）设置为
我想知道，你是否设置了CSS和HTML参数？如果是这样，尝试完全删除CSS一个。是的，它是一个反锯齿效应——但是图像没有被重新采样，它是相同的大小，所以这不应该发生。我已经在创建上下文时设置了标志，但是不知怎么地，它被取消了。我认为是一个bug，但是当我设置CTX.IMA时geSmoothingEnabled就在drawImage之前，图像不会变得模糊。如果更改画布的宽度或高度属性，则会重置整个上下文的属性。要避免任何CSS别名，请始终避免通过CSS设置画布大小。啊，就是这样：设置画布大小重置imageSmoothingEnabled！CSS和画布大小如果脚本同时将图像设置为相同的值，以确保不会通过css进行抗锯齿。但仍然存在一个问题，如果只是对图像进行点选，而不是调整大小，浏览器为什么要平滑图像？