如何在沒有像素模糊的情況下調整 html5 畫布的大小 (How to resize html5 canvas without pixel blur)

問題描述

如何在沒有像素模糊的情況下調整 html5 畫布的大小 (How to resize html5 canvas without pixel blur)

I am aware you can scale a canvas using css similar as found here.  But I have a 24x24 pixel canvas I want to through css make 600 pixels wide.  The result of that is:

Photo

Is there a method of doing this that will just display the pixels HUGE instead of blurred?

參考解法

方法 1:

Tried scale already?

canvas.scale(xScale, yScale);

方法 2:

try this

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

(by Carson Evans、jerone、Draka)

參考文件

1. How to resize html5 canvas without pixel blur (CC BY‑SA 3.0/4.0)