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

Question

更新

这肯定与我重新缩放画布的方式有关。如果我在画布上绘制相同的场景，并且不改变它的宽度和高度来填充屏幕，它就可以完美地工作。

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

---

我正在为画布编写游戏引擎，并且遇到图像被放大和混叠的问题，我阅读了一些针对有类似问题的人的答案。我修改了我的代码以在我的每个画布上启用以下设置。

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)
}

这是我尝试绘制的其中一张原始图像的示例。

然后我从 16x16 放大到 64x64，而不是看起来像使用了最近邻插值，而是像这样渲染。

我在 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 );