6

更新

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

在职的

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

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

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

4

2 回答 2

3

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

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

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

我还建议使用window.innerWidthandwindow.innerHeight来代替尺寸。

我的（免费）复古上下文库也可能很有趣。

于 2014-02-28T19:52:40.800 回答
0

如果您没有找到“实际”解决方案，您始终可以自己放大图形：

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 );
于 2014-02-28T15:30:39.693 回答