ฉันกำลังพยายามวาดไดอะแกรมด้วยแคนวาส และต้องการเส้นที่คมชัด ไม่ใช่การต่อต้านนามแฝง ฉันรู้เกี่ยวกับออฟเซ็ต 0.5 ที่คุณต้องใช้เพื่อทำให้เส้นตกบนพิกเซลของหน้าจอทุกประการ แต่ถึงอย่างนั้นฉันก็ได้รับเส้นต่อต้านนามแฝงใน Firefox ในขณะที่ทั้ง Chrome และ IE แสดงผลได้ดี
นี่คือตัวอย่างโค้ดบางส่วน:
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();
}
ดู JsFiddle: http://jsfiddle.net/einaregilsson/9yrF6/8/
นี่คือลักษณะที่ปรากฏใน Chrome และ IE:
นี่คือลักษณะที่ปรากฏใน Firefox:
นี่คือ Firefox 26 บน Windows 7 ฉันได้ลองปิดการเร่งด้วยฮาร์ดแวร์ซึ่งมีคนแนะนำ แต่ก็ไม่ได้สร้างความแตกต่าง มีแนวคิดใดบ้างที่ฉันจะได้เส้นที่คมชัดบน Firefox
นอกจากนี้มีใครใน Firefox ที่ไม่ได้รับบรรทัดต่อต้านนามแฝงเมื่อพวกเขาดูซอ? ฉันสงสัยว่านี่เป็นปัญหาทั่วไปของ Firefox หรือเฉพาะกับการตั้งค่าของฉัน
