如何在不进行抗锯齿的情况下调整画布大小？

这绝对与我如何重新调整画布。如果我在画布上绘制相同的场景，并且不改变它的宽度和高度以填充屏幕，则它完美地起作用。

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

我再从16×16上调到64×64，而是现身看起来像最近邻居插值使用，它呈现这样的。

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

来源

2014-02-28 Dan Prince

@ sebcap26有一个小提琴。 – easwee

@丹王子 - 也许这个问题可以给你一些更多的信息来解决这个问题：http://stackoverflow.com/questions/7615009/disable-interpolation-when-scaling-a-canvas – easwee

你可以给一些HTML/JS代码？ – enguerranws

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

调整画布大小后，只需重新应用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也可能是感兴趣的。

来源

2014-02-28 19:52:40 K3N

你是一个天才。我是一个白痴。谢谢！ –

你能链接任何文件解释可能的平滑重置？ –

如果你没有找到一个“真实”的解决方案，你可以永远只是扩展图形自己：

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-28 15:30:39

赞赏，但必须有一个实际的解决方案，因为我链接的小提琴适合我。 –

如何在不进行抗锯齿的情况下调整画布大小？

回答

相关问题