Question

更新

这绝对与我如何重新调整画布有关。如果我在画布上绘制相同的场景并且我没有改变它的宽度和高度来填充屏幕，那么它的效果非常好。

Working

为全屏环境调整画布大小的正确方法是什么？

我正在编写一个用于画布的游戏引擎，并且我遇到了图像被放大和混淆的问题，我通过几个答案来解释有类似问题的人。我修改了我的代码，以便在我的每幅画布上启用以下设置。

context.webkitImageSmoothingEnabled = false;                                                                                
context.mozImageSmoothingEnabled = false;                                                                                   
context.imageSmoothingEnabled = false;

为了确保，我还包括了这些规则的CSS备选方案。

canvas {
  image-rendering: optimizeSpeed;             // Older versions of FF
  image-rendering: -moz-crisp-edges;          // FF 6.0+
  image-rendering: -webkit-optimize-contrast; // Webkit (non standard naming)
  image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)
  image-rendering: crisp-edges;               // Possible future browsers.
  -ms-interpolation-mode: nearest-neighbor;   // IE (non standard naming)
}

以下是我试图绘制的原始图像之一的示例。

Character

然后我从16x16升级到64x64，而不是看起来像是使用了最近邻插值，它就像这样呈现。

Actual result

我在Chrome和Firefox中获得了相同的结果。我也不想做一个预处理步骤来升级图像。它必须是可能的，因为this demo对我有用。

另一件需要提及的是，该引擎设计用于全屏，因此我手动使用此功能保持画布的大小。

fill-screen = (canvas) ->
  canvas.width = document.body.clientWidth
  canvas.height = document.body.clientHeight

画布绝对位于其父级的左上角，除此之外，没有非浏览器CSS规则对它们进行操作。

也许我正在做一些愚蠢的事情，但我已经看了好几年了，而且我已经越来越近了。我在创建画布和上下文的文件的代码在这里：https://gist.github.com/code-curve/9273248

Answer 1

如果您调整画布大小，也会重置平滑设置（可能取决于浏览器）。

调整画布大小后，只需重新应用imageSmoothingEnabled。

fill-screen = (canvas) ->
  canvas.width = document.body.clientWidth
  canvas.height = document.body.clientHeight
  // re-apply here on context

我还建议您使用window.innerWidth和window.innerHeight代替尺寸。

我的（免费）retro context library也可能是有意义的。

Answer 2

如果您没有找到“实际”解决方案，您可以随时自行扩展图形：

var ctxData = ctx.getImageData()
  ,  pixels = ctxData.data
  ,   width = 16
  ,  height = 16
  ,    mult = 4
  ;

for( var x=width*mult-1; x>=0; x-- ){
    for( var y=height*mult-1; y>=0; y-- ){

        // or something close to this
        pixels[ y*width*mult*4 + x ] = pixels[ y*width*4 + x ];
    }
}

// pseudo code
canvas.width  *= mult;
canvas.height *= mult;

ctx.putImageData( ctxData );

如何在没有抗锯齿的情况下调整画布大小？

2 个答案: