2013-08-31 74 views
8

Làm cách nào để vô hiệu hóa hiệu ứng chống răng cưa trong mã sau? Tôi đang sử dụng Chrome 29.HTML5 canvas vô hiệu hóa antialias trên nguyên thủy (đường cong, ...)

JSFiddle here

var canvas = document.getElementById('test'); 
var context = canvas.getContext('2d'); 

// These lines don't change anything 
context.mozImageSmoothingEnabled = false; 
context.webkitImageSmoothingEnabled = false; 
context.imageSmoothingEnabled = false; 

context.beginPath(); 
context.arc(100, 100, 100, 0, Math.PI * 2, true); 
context.closePath(); 

context.fillStyle = 'red'; 
context.fill(); 
+0

câu hỏi này làm cho tôi nghĩ về điều này, mà tôi trả lời: http://stackoverflow.com/questions/14424648/nice-ellipse-on-a-canvas/14429346#14429346 Trong một vài từ: với một khá lớn hiệu suất hit, bạn có thể post-process vẽ hoặc tái thực hiện các nguyên thủy mà không antialiasing (khá một số công việc có thể), nhưng không có cách nào để làm cho nó thực hiện nhanh như vậy mà không antialiasing. – GameAlchemist

+0

Khi tôi đang tạo một kịch bản đồ thị, tôi đã tìm thấy nếu bạn vẽ cùng một thứ 20 lần, các pixel chống răng cưa xếp chồng lên nhau để trở thành bí danh. Cách nhanh hơn là vẽ các hình dạng mong muốn trên bộ đệm hình ảnh, kẹp alpha (0% hoặc 100%) bằng cách đọc dữ liệu và vẽ bộ đệm hình ảnh vào khung hình. (Tôi không có thời gian để viết mã) –

+0

Vui lòng xem dự án "canvas retro" của tôi tại đây: https://github.com/epistemex/retro-context-canvas (miễn phí) – K3N

Trả lời

5

Các imageSmoothingEnabled chỉ ảnh hưởng đến hình ảnh rút ra để sử dụng vải drawImage() (do đó tên ảnh SmoothingEnabled). Không có cách nào để vô hiệu hóa điều này cho các dòng và hình dạng.

Như với câu trả lời của 6502 và câu trả lời trước đây về SO, bạn sẽ cần triển khai các phương thức "cấp thấp" để đạt được điều này.

Dưới đây là một số liên kết đến một số thuật toán chung cho nguyên thủy khác nhau:

Cách bạn cần phải thực hiện điều này là để có được x và y tọa độ từ các công thức. Sau đó, bạn cần phải sử dụng trực tiếp rect(x, y, 1, 1) hoặc đặt pixel trực tiếp bằng cách thay đổi trực tiếp bộ đệm dữ liệu hình ảnh. Loại thứ hai có xu hướng nhanh hơn cho những thứ này.

Trong cả hai trường hợp, bạn sẽ có hiệu suất giảm tương đối lớn khi bạn cần lặp lại bằng JavaScript so với lần lặp được biên dịch nội bộ của trình duyệt.

+0

Re "reduce", Còn OpenGL thì sao? Việc thực hiện vẫn bị phạt? – Pacerier

+0

@Pacerier OpenGL không liên quan ở đây .. Ý của bạn là WebGL? Bạn có thể triển khai giải pháp trong WebGL bằng trình đổ bóng. – K3N

0

Đáng tiếc là không có cách nào di động để vô hiệu hóa khử răng cưa khi vẽ trên canvas.

Giải pháp duy nhất tôi tìm thấy là thực hiện lại các phần tử đồ họa viết trực tiếp trên dữ liệu hình ảnh.