Các dòng không mong muốn xuất hiện trong canvas html5 sử dụng các lát gạch

Question

Tôi đang vẽ bản đồ trên canvas bằng hình vuông 40px * 40px. Tất cả đều tốt cho đến khi tôi, bằng cách bù đắp canvas (sử dụng biến đổi), di chuyển bản đồ. Sau đó, từ hư không, dòng apear giữa gạch. Xem hình ảnh bên dưới.

Tại sao?

Answer 1

này trông giống như vị trí dấu chấm động (ví dụ: bạn đã cuộn đến 100,5, 100,5) kết hợp với Bilinear lọc hầu hết các trình duyệt sử dụng để hiển thị hình ảnh trên canvas 2D.

Về cơ bản, nếu bạn drawImage() một hình ảnh giữa các pixel, mỗi pixel được làm mịn trên hai pixel, có nghĩa là các cạnh vẽ ở mức 50% alpha trên nền. Điều này phá vỡ ốp lát, bởi vì cạnh của ô tiếp theo là giống nhau, và vẽ ở mức 50% alpha trên alpha 50% của khối khác, điều này cho biết thêm tới 75% alpha. Điều này sẽ xuất hiện sáng hơn hoặc tối hơn (tùy thuộc vào màu nền) so với phần còn lại của ô. Vì vậy, bạn nhận được "đường nối" dọc theo các cạnh của gạch.

Để khắc phục: Math.round() tọa độ hình ảnh của bạn, cũng như bất kỳ cuộc gọi nào để dịch() (vì dịch bởi nửa pixel có cùng tác dụng). Điều này đảm bảo tất cả mọi thứ được rút ra cho một lưới liên kết pixel và không bao giờ seams.