奇妙なHTML 5キャンバスアンチエイリアス

Question

私はキャンバス要素を使って遊んできましたが、NxNの均一な色のセルを隣り合わせに描画しようとすると、幅/高さの設定によっては、白い線がぼやけて見えますそれら。

たとえば、このキャンバスは黒く見えますが、ブラウザーで誤ったアンチエイリアスの結果であると思われるグリッドのようなものが含まれています。

言えば十分、このバグはのみにいくつかの設定を表示されますが、私は良いのためにそれを取り除くしたいと思います。これを回避する方法はありますか？キャンバスでアンチエイリアスに問題があったことはありますか？

私は問題を示すthis fiddleを作成しました。キャンバスのサイズとセル数で遊ぶことができます。また、私はセルを描画するために使用するコードが含まれているので、それを調べて何か間違っているかどうか教えてください。事前に

var ctx = canvas.getContext('2d'); 
ctx.clearRect(0, 0, canvasWidth, canvasHeight); 
for (var i = 0; i < numberOfCells; ++i) { 
    for (var j = 0; j < numberOfCells; ++j) { 
    ctx.fillStyle = '#000'; 
    ctx.fillRect(j * cellWidth, i * cellHeight, cellWidth, cellHeight); 
    } 
} 

おかげで、

ペトル。

Answer 1

私が読んでいくつかのアプローチを試みた後、私は自分自身を考え出すことにしました。グリッド内のセル数に対応する整数次元を持つ別の（仮想）キャンバスを作成しました。

メインのキャンバスでcontext.drawImage()を呼び出し、オフセットと縮尺のパラメータとともに引数として仮想キャンバスを渡して、残りの図面にフィットさせます。ブラウザが仮想キャンバスのイメージを（個々のセルではなく）全体として拡大すると仮定して、私は望ましくない区切り線を取り除くことを望んでいました。

私の努力にもかかわらず、行はまだそこにあります。助言がありますか？

はここに私の技術を実証するバイオリンです：https://jsfiddle.net/ngxjnywz/5/

Answer 2

jsFiddle：あなたは時々...しかし、これが表示される、4である4.2を言うことができます取得している、幅、高さ、あなたのnumberOfCellsによってはjavascriptの

var cellWidth = Math.ceil(canvasWidth/numberOfCells); 
var cellHeight = Math.ceil(canvasHeight/numberOfCells); 

のhttps://jsfiddle.net/ngxjnywz/2/

スニペット間違っており、1ピクセルの空白行が表示されます。したがって、Math.ceil関数を使用するだけで、cellWidthとcellHeightが常に高い数値になり、空白行がなくなります。

Answer 3

最適な解決策は、0.5ピクセル幅のストロークを追加することですすべての塗りつぶし、塗りつぶしと同じスタイルを使用し、左上ではなくピクセルの中央でレンダリングするようにすべての図面をオフセットします。

スケーリングまたは変換を追加する場合は、座標を調整して、図面座標の中心を指定する必要があります。

最終的にアーティファクトを減らすことはできますが、多くの場合、完全に削除することはできません。

この回答は、変換されていないキャンバスのアーティファクトを削除する方法を示しています。 How to fill the gaps