Maison >interface Web >js tutoriel >Une approche empêchant le canevas flou sur l'application mobile

Une approche empêchant le canevas flou sur l'application mobile

Barbara Streisand
Barbara Streisandoriginal
2024-11-03 07:01:02375parcourir

An approach preventing blurry canvas on mobile app

En général, le contenu du canevas du PC au mobile sera agrandi ou réduit, ce qui entraîne un certain effet secondaire de flou. Ceux-ci peuvent être résolus en utilisant la méthode suivante :

const domRect = document.getBoundingClientRect();
const dpr = window.devicePixelRatio; // get devicePixelRatio value of current mobile device
// set canvas viewport to multiple of dpr
canvas.width = domRect.width * dpr;
canvas.height = domRect.height * dpr;
// scale the content of canvas to multiple of dpr
canvas.scale(dpr, dpr);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn