Чіткий рендеринг Canvas на екранах із високою роздільною здатністю та Retina
Чому графіка Canvas виглядає розмитою на екранах Retina та екранах з високою роздільною здатністю та як це виправити за допомогою devicePixelRatio, включаючи обробку змін розміру та обмеження продуктивності.
Основний винос
Полотно виглядає розмитим на екранах із високою щільністю, коли розмір його пікселя відповідає розміру CSS, оскільки кожен піксель полотна розтягується на кілька фізичних пікселів. Виправте це, встановивши ширину та висоту полотна на розмір CSS, помножений на window.devicePixelRatio, зберігаючи розмір CSS незмінним, і масштабуючи контекст малювання за таким самим співвідношенням. Оновіть його для зміни розміру та масштабування.
Чому полотна розпливаються
MDN описує devicePixelRatio як відношення фізичних пікселів до CSS пікселів на поточному дисплеї: 1 на класичному екрані 96 DPI і 2 на типових екранах HiDPI або Retina. Полотно має власний піксельний буфер. Якщо цей буфер має розмір 300 на 150 пікселів, але відображається на екрані розміром 300 на 150 CSS пікселів із співвідношенням 2, браузер розтягує його на 600 на 300 фізичних пікселів, що виглядає м’яким.
Виправлення
Рекомендований підхід MDN полягає у використанні devicePixelRatio для додавання додаткової щільності пікселів: встановіть для буфера полотна розмір CSS, помножений на співвідношення, збережіть розмір CSS незмінним і масштабуйте 2D-контекст, щоб ваш код малюнка міг продовжувати використовувати пікселі CSS. Перегляньте код нижче.
Ручка зміни розмірів і масштабування
Співвідношення змінюється, коли вікно переміщується на інший монітор або користувач масштабує сторінку. Перерахуйте при зміні розміру та прослухайте зміни в медіа-запиті роздільної здатності, щоб ви могли перемалювати з новою щільністю. ResizeObserver на елементі canvas — це надійний спосіб підтримувати синхронізацію розміру з макетом.
Межі продуктивності
Подвоєння співвідношення збільшує кількість пікселів для малювання в чотири рази. На дуже великих полотнах або недорогих пристроях обмежте співвідношення, наприклад 2, і виміряйте час кадру. Середовище виконання анімації, яке малює на полотні, наприклад засіб обробки полотна Lottie, Rive і ExodeUI, обробляє це масштабування за вас, але застосовується той самий компроміс.
Фрагмент впровадження виробництва
function setupCanvas(canvas) {
const ctx = canvas.getContext('2d');
function resize() {
const ratio = Math.min(window.devicePixelRatio || 1, 2); // cap for performance
const { width, height } = canvas.getBoundingClientRect(); // CSS size
canvas.width = Math.round(width * ratio); // backing store in device pixels
canvas.height = Math.round(height * ratio);
ctx.setTransform(ratio, 0, 0, ratio, 0, 0); // draw in CSS pixels
draw(ctx, width, height);
}
new ResizeObserver(resize).observe(canvas);
resize();
}
function draw(ctx, width, height) {
ctx.clearRect(0, 0, width, height);
ctx.lineWidth = 1;
ctx.strokeRect(0.5, 0.5, width - 1, height - 1); // crisp 1px border
}Ключі Principle, які слід запам’ятати
- devicePixelRatio = фізичні пікселі на піксель CSS (2 на типових екранах Retina)
- Установіть для canvas.width/height значення CSS розмір × співвідношення; зберегти розмір CSS
- Масштабуйте контекст, щоб код малювання використовував CSS пікселів
- Перерахуйте зміну розміру, зміну монітора та масштабування
- Обмежте співвідношення на великих полотнах для продуктивності
Часті запитання
Джерела
- Window: devicePixelRatio property — MDN Веб-документи