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

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中获得了相同的结果.我也不想做一个预处理步骤来升级图像.它必须是可能的,因为这个演示对我有用.

另外要提的是,引擎设计用于全屏,所以我手动保持画布的大小与此功能.

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.innerWidthandwindow.innerHeight代替尺寸。

我的（免费）复古上下文库也可能令人感兴趣。