GHI CHÚ : Điều này có liên quan đến cách các phần tử canvas hiện có được hiển thị khi được tăng tỷ lệ , không liên quan đến cách hiển thị các đường hoặc đồ họa trên bề mặt vải . Nói cách khác, điều này có mọi thứ để làm với phép nội suy các phần tử tỷ lệ và không liên quan gì đến việc khử răng cưa của đồ họa được vẽ trên một khung vẽ. Tôi không quan tâm đến cách trình duyệt vẽ các dòng; Tôi quan tâm đến cách trình duyệt hiển thị chính phần tử canvaskhi nó được thu nhỏ.
Có thuộc tính canvas hoặc cài đặt trình duyệt nào tôi có thể thay đổi theo chương trình để tắt nội suy khi chia tỷ lệ <canvas>không? Một giải pháp đa trình duyệt là lý tưởng nhưng không cần thiết; Các trình duyệt dựa trên Webkit là mục tiêu chính của tôi. Hiệu suất là rất quan trọng.
Câu hỏi này là tương tự nhất nhưng không minh họa vấn đề đầy đủ. Đối với những gì nó có giá trị, tôi đã cố gắng image-rendering: -webkit-optimize-contrastvô ích.
Ứng dụng này sẽ là một trò chơi 8 bit theo phong cách "retro" được viết bằng HTML5 + JS để làm cho nó rõ ràng những gì tôi cần.
Để minh họa, đây là một ví dụ. ( phiên bản trực tiếp )
Giả sử tôi có một bức tranh 21x21 ...
<canvas id='b' width='21' height='21'></canvas>... có css làm cho phần tử lớn hơn gấp 5 lần (105x105):
canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */Tôi vẽ một chữ 'X' đơn giản trên khung vẽ như vậy:
$('canvas').each(function () {
var ctx = this.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(21,21);
ctx.moveTo(0,21);
ctx.lineTo(21,0);
ctx.stroke();
});Hình ảnh bên trái là những gì Chromium (14.0) hiển thị. Hình ảnh bên phải là những gì tôi muốn (vẽ tay cho mục đích minh họa).
