Weird HTML 5 Canvas Antialiasing

Question

Tôi đã chơi với phần tử canvas và phát hiện ra rằng khi tôi cố gắng vẽ các ô màu đồng nhất NxN bên cạnh nhau, trong một số cấu hình chiều rộng/chiều cao, có các đường màu trắng mờ giữa chúng. Ví dụ:

Ví dụ: canvas này có màu đen nhưng chứa một số loại lưới mà tôi phỏng đoán là kết quả của việc chống răng cưa bị lỗi trong trình duyệt.

đủ để nói, lỗi này chỉ xuất hiện trong một số cấu hình nhưng tôi muốn để thoát khỏi nó cho tốt. Có cách nào để phá vỡ điều này không? Bạn đã từng gặp vấn đề với khử răng cưa trong canvas chưa?

Tôi đã thực hiện this fiddle minh họa sự cố và cho phép bạn chơi với kích thước của canvas và số ô. Nó cũng chứa mã tôi sử dụng để vẽ các ô, để bạn có thể kiểm tra nó và cho tôi biết nếu tôi làm gì sai.

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); 
    } 
} 

Cảm ơn trước,

Petr.

Answer 1

Sau khi đọc qua và thử một số cách tiếp cận, tôi đã quyết định tự mình làm theo. Tôi đã tạo một canvas (ảo) khác có kích thước số nguyên tương ứng với số lượng ô trong lưới.

Sau khi vẽ tất cả các ô trong đó, tôi gọi context.drawImage() trên canvas chính và chuyển canvas ảo làm đối số cùng với tham số bù trừ và tỷ lệ để làm cho nó phù hợp với phần còn lại của bản vẽ của tôi. Giả sử rằng trình duyệt sẽ mở rộng toàn bộ hình ảnh của canvas ảo (và không phải là các ô riêng lẻ), tôi đã hy vọng loại bỏ các đường phân cách không mong muốn.

Bất chấp những nỗ lực của tôi, các đường vẫn còn đó. Bất kỳ đề xuất?

Đây là fiddle chứng minh kỹ thuật của tôi: https://jsfiddle.net/ngxjnywz/5/

Answer 2

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

đoạn mã javascript

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

Tùy thuộc vào chiều rộng, chiều cao và numberOfCells của bạn đôi khi bạn đang nhận được một ... cho phép nói 4.2 là 4, tuy nhiên điều này sẽ được hiển thị sai và sẽ cho phép một dòng trống 1 pixel xuất hiện. Vì vậy, tất cả những gì bạn cần làm là sử dụng chức năng Math.ceil và điều này sẽ làm cho cellWidth và cellHeight của bạn luôn trở thành số cao hơn và bạn sẽ không nhận được các dòng trống nữa

Answer 3

Giải pháp tốt nhất là thêm xung đột rộng 0,5 pixel tất cả các bản đầy, sử dụng cùng một kiểu như điền và bù đắp tất cả bản vẽ để bạn hiển thị ở giữa pixel thay vì ở trên cùng bên trái.

Nếu bạn thêm tỷ lệ hoặc bản dịch, bạn sẽ phải điều chỉnh tọa độ để bạn vẫn cung cấp cho các trung tâm cho tọa độ bản vẽ của mình.

Cuối cùng, bạn chỉ có thể giảm hiện vật nhưng trong nhiều trường hợp, bạn sẽ không thể xóa hoàn toàn chúng.

Câu trả lời này cho bạn biết cách loại bỏ các tạo tác cho một canvas không được chuyển đổi. How to fill the gaps