Comment résoudre le problème des polices, images et graphiques flous dessinés sur 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, alors l'attribut width du HTML Sera utilisé la hauteur comme taille.

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

Recherchez le flou de toile en ligne, il y aura deux solutions. la méthode n’est peut-être pas adaptée pour le moment.

L'un d'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

我在研究时用了动态创建canvas的方法，样式的width/height乘以缩放比devicePixelRatio得到canvas的属性width/height。<br/>

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

<code><span style="font-size: 14px"><strong><span style="font-family: Microsoft YaHei">解决方法</span></strong></span><br/><span style="font-family: Microsoft YaHei; font-size: 14px">1、动态创建并监视window的onresize事件，根据<span style="font-family: Consolas">devicePixelRatio</span>重建canvas。<br/>2、动态调整canvas样式的宽高，同样监视onresize事件。再配合<span style="font-family: Microsoft YaHei">CanvasRenderingContext2D.scale动态缩放绘制内容的比例。</span><br/></span><span style="font-family: Microsoft YaHei; font-size: 14px">浏览器都没有devicePixelRatio改变的事件，或者dpi改变的事件，如果你知道，请留言。</span><br/></code>

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!