キャンバスにペイントするのにputImageData
を使いたいです。しかし何らかの理由で塗装されたピクセルがぼやけていて、なぜかわからない。ここでは、最小限の例です:putImageDataを使用すると、キャンバス上でぼやけて描画されないようにするにはどうすればよいですか?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
html, body, canvas { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
</style>
</head>
<body oncontextmenu="return false;">
<canvas id='canvas'></canvas>
<script type='text/javascript'>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext("2d");
ctx.imageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
let uarr = new Uint8ClampedArray(4);
uarr[0] = 0;
uarr[1] = 0;
uarr[2] = 0;
uarr[3] = 255;
let imgData = new ImageData(uarr , 1, 1);
ctx.putImageData(imgData, 20, 20);
</script>
</body>
</html>
この20,20
座標で1つの黒画素をペイントする必要がありますが、何らかの理由でそれがぼやけて見えます。
にはどうすればシャープなエッジを描画するために強制することができますか?
まだすべてのブラウザがこれをサポートしているとは限りません。サファリはホールドアウトのようです。どのブラウザを使用していますか? – somethinghere
クロムとサファリをチェックしてください – NoNameProvided
ああ待ってください。 'canvas.width = window.innerWidtht'と' canvas.height = window.innerHeight'を試してみてください。現在、標準サイズのキャンバスをCSSを使用して画面のサイズに伸ばしていますが、それはキャンバスの仕方ではなく、あらかじめ定義されたサイズで伸ばすことができます。 – somethinghere