如何在不消除锯齿的情况下调整画布大小? [英] How to resize a canvas without anti-aliasing?

问题描述

更新

这与我重新缩放画布的方式有关.如果我将同一场景绘制到画布上，但不更改其宽度和高度以填充屏幕，则效果很好.

It's definitely to do with how I'm rescaling the canvas. If I draw the same scene onto a canvas and I don't change it's width and height to fill the screen, it works perfectly.

在全屏环境中调整画布大小的正确方法是什么?

What is the correct way to resize a canvas for fullscreen environments?

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

I'm writing a game engine for canvas and am having problems with images being upscaled and aliased, I read through a couple of answers for people having similar problems. I amended my code to enable the following settings on each of my canvases.

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

为了确保这一点，我还提供了这些规则的CSS替代方法.

Just to make sure, I also included the CSS alternatives of these rules.

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

这是我要绘制的原始图像之一的示例.

Here's an example of one of the original images I am trying to draw.

然后我将其从16x16升级到64x64，而不是看起来像使用最近邻插值法，而是这样渲染的.

I'm then upscaling from 16x16 to 64x64 and instead of coming out looking like nearest-neighbour interpolation was used, it renders like this.

在Chrome和Firefox中，我得到相同的结果.我也不想执行预处理步骤来放大图像.这是有可能的，因为此演示为我工作.

I get the same results in Chrome and Firefox. I don't want to do a preprocessing step to upscale the images, either. It's got to be possible, because this demo works for me.

要提及的另一件事是，该引擎被设计为在全屏模式下使用，因此我使用此功能手动使画布的尺寸保持最新.

The other thing to mention, is that the engine is designed to be used in fullscreen, so I am manually keeping the size of the canvases up to date with this function.

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

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

The canvases are absolutely positioned to the top left hand corner of their parent, other than that, there are no non-browser CSS rules operating on them.

也许我在做一些愚蠢的事情，但是多年来我一直在研究这个问题，而且我离这还很近.我在其中创建画布和上下文的文件的代码如下: https://gist. github.com/code-curve/9273248

Maybe I'm doing something stupid, but I've been looking at this for ages and I'm getting no closer. The code for the file where I am creating the canvases and contexts is here: https://gist.github.com/code-curve/9273248

推荐答案

如果您调整画布的大小，则也会重置平滑设置(可能取决于浏览器).

If you resize the canvas the smoothing setting is reset as well (may depend on browser).

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

After you resize the canvas simply re-apply the imageSmoothingEnabled.

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

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

I would also recommend using window.innerWidth and window.innerHeight instead for the sizes.

我的(免费)复古上下文库也可能引起人们的兴趣.

My (free) retro context library may also be of interest.

这篇关于如何在不消除锯齿的情况下调整画布大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！