如何在不進行抗鋸齒的情況下調整畫布大小？

這絕對與我如何重新調整畫布。如果我在畫布上繪製相同的場景，並且不改變它的寬度和高度以填充屏幕，則它完美地起作用。

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

讚賞，但必須有一個實際的解決方案，因爲我鏈接的小提琴適合我。 –

如何在不進行抗鋸齒的情況下調整畫布大小？

回答

相關問題