マウスオーバーイベントのあるシンプルなキャンバスがあります。ユーザーがマウスを動かすと、イベントの x、y 座標に単一のピクセルを描画したいと考えています (将来的には、単一のピクセルよりも複雑になります)。基本的には、カスタム カーソルのようなものです。
以下に示すように、ロジックは非常に単純です。奇妙なことに、古いピクセルの位置をクリーンアップしていますが、ピクセルの小さな残骸が残っています (この質問を投稿してから、Retina ディスプレイに関連していることがわかりました)。私はこれを回避することができました。1px を保存して 1px を復元する代わりに、3px を保存して 3px を復元します。しかし、なぜこれを行う必要があるのか\u200b\u200bわかりません。将来、より複雑なカーソルを描画するときに、ダーティ ピクセルの処理を正確にしたいと考えています。
実行可能な JSFiddle の例を次に示します: http://jsfiddle.net/sbCq3/2/
// cleanup previously drawn pixel
ctx.putImageData(lastImageData, lastImageX, lastImageY);
// save the imageData currently at x,y
lastImageData = ctx.getImageData(x, y, 1, 1);
lastImageX = x;
lastImageY = y;
// draw the dot
var dotData = ctx.createImageData(1, 1);
...
ctx.putImageData(dotData, x, y);
私は少し困惑しています。私のRetinaディスプレイと関係があるのか 疑問に思っています。5.5 で 1 ピクセルを描画すると、画像データでは 1 ピクセルになりますが、DigitalColor Meter (組み込みのズーム ツール) を使用してズームすると、1 ピクセルが細分化され、アンチエイリアス処理されていることがわかります。一方、Windows マシンでそのピクセルを表示すると、見栄えの良いソリッド ピクセルになります。この問題が Windows または非 Retina マシンで発生するかどうかはまだテストしていません。(通常のキャンバスのアンチエイリアシングの問題については言及していません)。
更新: 同僚の非 Retina MacBook 17 インチでこれをテストしたところ、完全に正常に動作します。したがって、これは明らかに Retina ディスプレイに関連しているようです。