Bản vẽ Canvas và màn hình Retina: có thể thực hiện được?

Làm việc với điện thoạiGap triển khai bản vẽ bằng Canvas. Việc nắm bắt chúng tôi đã chạy vào là canvas dự kiến kích thước pixel cụ thể. Điều này là tốt ngoại trừ màn hình Retina của iPhone 4, từ CSS/Webkit POV vẫn còn rộng 320px, mặc dù về mặt kỹ thuật có 640 pixel màn hình thực tế.Bản vẽ Canvas và màn hình Retina: có thể thực hiện được?

Có cách nào để điều chỉnh màn hình hiển thị võng mạc bằng Canvas trên Webkit trong khi vẫn giữ khả năng tương thích với màn hình không phải màn hình không?

Nguồn

2011-01-18 DA.

Xem câu trả lời của tôi cho một giải pháp thả trong ... http://stackoverflow.com/a/19546481/555384 – jondavidjohn

tôi ngồi với cùng một vấn đề tuần trước và khám phá làm thế nào để giải quyết nó -

var canvas = document.querySelector('canvas'); 
var ctx = canvas.getContext('2d'); 

if (window.devicePixelRatio > 1) { 
    var canvasWidth = canvas.width; 
    var canvasHeight = canvas.height; 

    canvas.width = canvasWidth * window.devicePixelRatio; 
    canvas.height = canvasHeight * window.devicePixelRatio; 
    canvas.style.width = canvasWidth; 
    canvas.style.height = canvasHeight; 

    ctx.scale(window.devicePixelRatio, window.devicePixelRatio); 
}

Full code on gist, demo on jsfiddle

Nguồn

2011-03-15 02:37:28

A rất muộn 'cảm ơn!' Tôi hy vọng sẽ thử điều này sớm. –

Bạn có thể phản chiếu trang web này ở đâu đó không? Liên kết đó bị hỏng. –

hãy luôn sao chép và dán giải pháp vào stackoverflow, do đó, nó vẫn có sẵn ngay cả khi trang web ngoại tuyến. – kritzikratzi

WebCode (http://www.webcodeapp.com) là một ứng dụng vẽ vector mà tạo ra mã JavaScript HTML5 Canvas cho bạn . Mã này tương thích với Retina, bạn có thể xem chúng hoạt động như thế nào.

Nguồn

2013-06-06 09:58:33 atreidp

Điều đó cũng nhắc tôi về http://code.google.com/p/canvg/. Lưu ý chắc chắn cách nó xử lý võng mạc. –

Có một vùng chèn thả xuống sẽ xử lý hầu hết thao tác vẽ cơ bản cho bạn và loại bỏ sự mơ hồ giữa các trình duyệt xử lý tự động cho bạn (safari) và các trình duyệt khác không.

https://github.com/jondavidjohn/hidpi-canvas-polyfill

Bạn chỉ cần đưa nó trước khi mã vẽ của bạn và nó sẽ cho bạn hỗ trợ võng mạc đàng hoàng tự động.

Nguồn

2013-10-23 15:51:02 jondavidjohn

Thảm họa này làm cho canvas của tôi phát triển một cách kỳ lạ, mỗi khi tôi vẽ lên canvas của mình cho đến khi nó gần như làm hỏng tab của tôi trong Safari. Tôi nghĩ tôi sẽ cố gắng thực hiện nó theo cách thủ công. –

@JaredUpdike Âm thanh như một ứng cử viên tuyệt vời để báo cáo qua vấn đề github với một ví dụ chi tiết để có thể sửa lỗi cho người khác. – jondavidjohn

EDIT: Chỉ cần nhận thấy tôi đã đăng liên kết sai cho bản trình diễn!

Độ phân giải canvas võng mạc (hoặc màn hình hdpi khác) chắc chắn là có thể. Có một ví dụ làm việc ở đây:

http://spencer-evans.com/share/github/canvas-resizer/

Tôi cũng tình cờ gặp này một vài lần. Mã trả lời được chấp nhận về cơ bản là chính xác, nhưng bạn cũng có thể sử dụng giải pháp thư viện. Tôi đã đánh một cái để xử lý việc sắp xếp lại kích thước của canvas thông minh để làm cho phần tử có độ phân giải cao hơn và đáp ứng cao hơn (như trong bản demo).

https://github.com/swevans/canvas-resizer

Nguồn

2015-11-06 02:34:02