HTML5 Canvas ảnh Scaling Issue

Question

tôi đang cố gắng để tạo ra một trò chơi điểm ảnh nghệ thuật với chủ đề trong HTML5 canvas, và như một phần của mà tôi mất 10x20 hoặc lâu hơn kích cỡ hình ảnh và vẽ chúng vào vải với đoạn mã sau:

ctx.drawImage(image, 20, 20, 100, 200); 

Tuy nhiên, canvas sử dụng tỷ lệ hình ảnh bicubic và do đó các hình ảnh nghệ thuật pixel trông khủng khiếp ở mức 2x trở lên. Có cách nào để buộc canvas sử dụng tỷ lệ hàng xóm gần nhất hoặc có thể sử dụng phương pháp tùy chỉnh để chia tỷ lệ hình ảnh không? Nếu không có nghĩa là hình ảnh phải được thu nhỏ trước trong một cái gì đó như Paint.net?

Answer 1

Chọn bất kỳ một trong các cách sau:

---

Via JavaScript:

ctx.imageSmoothingEnabled = false; 

^{Nguồn: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#image-smoothing}

On Gecko, bạn sẽ cần

ctx.mozImageSmoothingEnabled = false; 

^{Nguồn: https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#Gecko-specific_attributes}

On Webkit, bạn sẽ cần

ctx.webkitImageSmoothingEnabled = false; 

^{Nguồn: https://bugs.webkit.org/show_bug.cgi?id=82804}

tôi không thể tìm thấy thông tin về hỗ trợ tài sản này trên các trình duyệt khác , vì vậy họ có thể không hỗ trợ nó.

---

Via CSS:

Một lựa chọn khác là sử dụng một bộ quy tắc CSS trên canvas. Ví dụ:

<canvas id="c" width="16" height="16"></canvas> 
<script> 
    var c = document.getElementById("c"), 
     cx = c.getContext("2d"), 
     im = new Image(); 
    im.src = "http://stackoverflow.com/favicon.ico"; // 16x16 
    cx.drawImage(im, 0, 0); 
</script> 
<style> 
    canvas { 
    width: 32px; 
    height: 32px; 
    image-rendering: optimizeSpeed; 
    image-rendering: crisp-edges; 
    image-rendering: -moz-crisp-edges; 
    image-rendering: -o-crisp-edges; 
    image-rendering: -webkit-optimize-contrast; 
    -ms-interpolation-mode: nearest-neighbor; 
    } 
</style> 

^{Nguồn: https://developer.mozilla.org/en/CSS/image-rendering
Nguồn: https://bugs.webkit.org/show_bug.cgi?id=56627}

---

Via thói quen điểm ảnh:

Tuy nhiên, tùy chọn khác là để làm điều đó cho mình bằng cách sử dụng vải thói quen thao tác pixel: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation. Đó là nhiều công việc hơn, mặc dù.