Résoudre le problème du dessin de polices, d'images et de graphiques flous dans un canevas HTML5

Problème de flou des polices de dessin, des images et des graphiques sur toile HTML5

Occurrence

Se produit fréquemment sur appareils à haute résolution, cela signifie plus de pixels par pouce carré, tels que les téléphones et les tablettes. Bien entendu, de nombreux ordinateurs de bureau haut de gamme disposent également de moniteurs haute résolution et haute résolution.

Le principe de mise à l'échelle du canevas dans le navigateur

Si le style n'est pas défini, puis utilisez les attributs HTML width et height comme dimensions.

Si la largeur et la hauteur dans le style sont définies, alors le paramètre de style sera la taille finale affichée dans le navigateur.

En d'autres termes, la largeur et la hauteur dans les attributs ne représentent pas la largeur et la hauteur réelles, donc la toile sera agrandie à un dpi élevé, ce qui entraînera un flou.

Les attributs de largeur et de hauteur du canevas correspondent à la taille du tampon arrière du canevas, qui sera mise à l'échelle en fonction du dpi actuel après avoir été dessinée dans le navigateur.

devicePixelRatio (membre de la fenêtre) enregistre le rapport largeur/hauteur de l'attribut en cours d'agrandissement dans un état de résolution élevée.

Cas de solution d'erreur

Flou du canevas de recherche en ligne, il y aura deux solutions, et elles ne conviennent peut-être pas maintenant.

L'un d'entre eux est CanvasRenderingContext2D.translate(0.5,0.5);

Ceci est en fait couramment utilisé dans le domaine du dessin 3D pour gérer le décalage des pixels. Move, le contexte 2D de Canvas a déjà traité ce problème.

L'autre est backingStorePixelRatio. Vous verrez un code similaire au suivant. Ce backingStorePixelRatio a été supprimé dans le nouveau navigateur. J'ai essayé Chrome et Edge et il n'existe plus.

var ctx = document.createElement("canvas").getContext("2d"),
        dpr = window.devicePixelRatio || 1,
        bsr = ctx.webkitBackingStorePixelRatio ||
              ctx.mozBackingStorePixelRatio ||
              ctx.msBackingStorePixelRatio ||
              ctx.oBackingStorePixelRatio ||
              ctx.backingStorePixelRatio || 1

J'ai utilisé la méthode de création dynamique de canevas pendant la recherche. La largeur/hauteur du style est multipliée par le rapport de mise à l'échelle de l'appareilPixelRatio à. obtenir les propriétés de la toile largeur/hauteur. <code>我在研究时用了动态创建canvas的方法，样式的width/height乘以缩放比devicePixelRatio得到canvas的属性width/height。<br>

Ce n'est pas une solution parfaite car cela se produit lorsque le dpi du navigateur change, comme les paramètres utilisateur, ou lors du déplacement de la fenêtre d'un moniteur à haute résolution vers un moniteur à faible résolution. . (Mon moniteur ordinaire de 23 pouces 1080p est 1,25 fois et celui de la tablette 2,0 fois. Le glisser-déposer des fenêtres se produira)

Solution
1. Créez et surveillez dynamiquement l'événement de redimensionnement de la fenêtre, en fonction. vers devicePixelRatio Reconstruire le canevas.
2. Ajustez dynamiquement la largeur et la hauteur du style de canevas et surveillez également l'événement onresize. Coopérez ensuite avec CanvasRenderingContext2D.scale pour mettre à l'échelle dynamiquement la proportion du contenu dessiné.

Les navigateurs n'ont pas d'événements de changement de devicePixelRatio ou d'événements de changement de dpi. Si vous le savez, veuillez laisser un message.

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!