Tại sao context2d.backingStorePixelRatio không được chấp nhận?

Question

Theo bài viết của Paul Lewis, High DPI Canvas: Bạn cần tính đến số context.backingStorePixelRatio để giải quyết các vấn đề làm mờ.

Nếu thuộc tính này không được chấp nhận, phi tiêu sẽ xử lý vấn đề mờ trên thiết bị có độ nét cao?

Answer 1

Tôi nghĩ điều tương tự và như xa như các Issue Tracker nói:

Có, vì vậy bài báo đã được viết lại khi Safari đã có một sự ủng hộ tỷ lệ cửa hàng của 2. Đó luôn là 1 trong Chrome.

Như bạn nói phương pháp để đối phó với điều này là:

canvas.width = width * window.devicePixelRatio;
canvas.height = height * window.devicePixelRatio;

canvas.style.width = width + 'px';
canvas.style.height = height + 'px';

đâu width và height là tuy nhiên bạn muốn họ (có thể là window.innerWidth & innerHeight cho toàn bộ khung nhìn shenanigans.)

Sau đó, bạn chỉ cần điều chỉnh cho thực tế là bạn upscaled vải với:

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

Vì vậy, bạn có giải pháp của bạn.