putImageDataを使用すると、キャンバス上でぼやけて描画されないようにするにはどうすればよいですか？

キャンバスにペイントするのに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つの黒画素をペイントする必要がありますが、何らかの理由でそれがぼやけて見えます。

にはどうすればシャープなエッジを描画するために強制することができますか？

出典

2016-08-13 NoNameProvided

まだすべてのブラウザがこれをサポートしているとは限りません。サファリはホールドアウトのようです。どのブラウザを使用していますか？ – somethinghere

クロムとサファリをチェックしてください – NoNameProvided

ああ待ってください。 'canvas.width = window.innerWidtht'と' canvas.height = window.innerHeight'を試してみてください。現在、標準サイズのキャンバスをCSSを使用して画面のサイズに伸ばしていますが、それはキャンバスの仕方ではなく、あらかじめ定義されたサイズで伸ばすことができます。 – somethinghere

CSSがデフォルトのサイズのキャンバスを画面のサイズに伸ばしているように、キャンバスの幅と高さの属性を設定する必要があります。その後、ctx.imageSmoothingEnabledは正常に動作するはずです。

var canvas = document.getElementById('canvas'); 
 

 
// This will stretch correctly 
 
canvas.width = window.innerWidth; 
 
canvas.height = window.innerHeight; 
 

 
var ctx = canvas.getContext("2d"); 
 
ctx.imageSmoothingEnabled = false; 
 
ctx.mozImageSmoothingEnabled = false; 
 
ctx.webkitImageSmoothingEnabled = false; 
 
ctx.msImageSmoothingEnabled = false; 
 

 
var uarr = new Uint8ClampedArray(4); 
 
uarr[0] = 0; 
 
uarr[1] = 0; 
 
uarr[2] = 0; 
 
uarr[3] = 255; 
 

 
var imgData = new ImageData(uarr , 1, 1); 
 
ctx.putImageData(imgData, 20, 20);

html, body, canvas { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }

<canvas id='canvas'></canvas>

@Kaidoは以下のコメントで述べているように、imageSmoothingEnabledは本当にそのように動作しません。彼のフィドルをチェックして、それが何のために使用できるかを詳しく見てください。

出典

2016-08-13 15:22:34 somethinghere

'imageSmoothingEnabled'は' drawImage'メソッドに対してのみ機能します。 'putImageData'はアンチエイリアスを作成しません（デフォルトではキャンバスAPIメソッドではありません）。imageDataのデータに設定されているように生のピクセルを配置します。 https://jsfiddle.net/w8deLfo1/ – Kaiido

良いキャッチですが、（バッファキャンバスのように）この周りに簡単な方法があります。 – somethinghere

回避策はありません。putImageDataにimageSmoothingEnabledを設定する必要はありません。 – Kaiido

putImageDataを使用すると、キャンバス上でぼやけて描画されないようにするにはどうすればよいですか？

答えて

関連する問題