如何調整html5畫布的大小而無像素模糊

我知道您可以使用css類似的縮放畫布來找到here。但我有一個24x24像素的畫布，我想通過css製作600像素寬。那結果是：如何調整html5畫布的大小而無像素模糊

是否有隻會顯示巨大的，而不是模糊的像素這樣的方法？

2013-08-17 Carson Evans

試過scale已經？

canvas.scale(xScale, yScale);

來源

2013-08-17 12:15:02 jerone

我不知道如果我正確理解該方法。當使用'canvas.scale（1，1）'以外的任何值時，不再適合畫布內部。 –

製作cancas 600x600並導入您的24x24圖像並將其縮小25倍。 – jerone

我沒有使用24x24圖像。我鏈接的圖像是我的畫布的屏幕截圖。我正在手動繪製像素。 –

試試這個

canvas, 
img { 
    image-rendering: crisp-edges; 
    image-rendering: -moz-crisp-edges; 
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: optimize-contrast; 
    -ms-interpolation-mode: nearest-neighbor; 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

來源

2013-10-12 08:56:45 Draka

這並不能解決它對我來說 – Supuhstar

檢查這個例子在Firefox中http://jsfiddle.net/7uL2fhLk/ 1 /，在Chrome中不起作用 – Draka

如果它在Chrome中不起作用，它將不適用於Safari，Opera，Yandex，Maxthon和許多其他基於Webkit或Blink的瀏覽器 – Supuhstar

如何調整html5畫布的大小而無像素模糊

回答

相關問題