Saya mencoba menggambar diagram dengan kanvas dan ingin mendapatkan garis yang tajam, bukan anti-alias. Saya tahu tentang offset 0,5 yang perlu Anda gunakan untuk membuat garis jatuh tepat pada piksel layar, tetapi bahkan dengan itu saya mendapatkan garis anti-alias di Firefox, sementara Chrome dan IE merendernya dengan baik.
Berikut beberapa contoh kode:
JS:
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
canvas.width = 100;
canvas.height = 100;
ctx.translate(-0.5, -0.5); //To get crisp lines
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
for (var x = 20; x < 100; x += 20){
ctx.moveTo(x, 20);
ctx.lineTo(x,100);
ctx.stroke();
}
Lihat JsFiddle: http://jsfiddle.net/einaregilsson/9yrF6/8/
Ini tampilannya di Chrome dan IE:
Ini tampilannya di Firefox:
Ini adalah Firefox 26 di Windows 7. Saya sudah mencoba mematikan akselerasi perangkat keras, yang disarankan seseorang tetapi tidak ada bedanya. Adakah ide bagaimana saya bisa mendapatkan garis yang jelas di Firefox?
Selain itu, apakah ada orang di Firefox yang tidak mendapatkan baris anti-alias saat melihat Fiddle? Saya ingin tahu apakah ini masalah umum Firefox, atau masalah khusus pada pengaturan saya.
