recherche

Maison >interface Web >tutoriel HTML >Les lignes dessinées sur le canevas HTML5 semblent floues

Les lignes dessinées sur le canevas HTML5 semblent floues

WBOY
WBOYavant
2023-09-08 20:45:051148parcourir

La tâche que nous allons effectuer dans cet article concerne le dessin sur toile HTML5, par exemple les lignes semblent floues.

Nous avons observé un effet de flou car différents appareils ont des ratios de pixels différents. Le navigateur ou l'appareil utilisé pour afficher le canevas affecte souvent le degré de flou de l'image.

Le widget Pixel Ratio de l'interface Window renvoie le rapport entre les pixels physiques du périphérique d'affichage et sa résolution en pixels CSS. Ce nombre peut également être compris comme le rapport entre les pixels physiques et les pixels CSS, ou la taille d'un pixel par rapport à un autre.

Plongeons dans l'exemple suivant pour en savoir plus sur le dessin sur toile HTML5, comme les lignes qui semblent floues.

Exemple 1

Dans l'exemple ci-dessous, nous avons flouté un texte simple pour le rendre clair.

Les lignes dessinées sur le canevas HTML5 semblent floues

Nous envisageons cette image floue

<!DOCTYPE html>
<html>
<body>
   <canvas id="my tutorial"
      style="border:1px solid black;">
   </canvas>
   <script>
      var canvas = document.getElementById('my tutorial');
      var ctx = canvas.getContext('2d');
      window.devicePixelRatio=2;
      var size = 170;
      
      canvas.style.width = size + "px";
      canvas.style.height = size + "px";
      var scale = window.devicePixelRatio;
      
      canvas.width = Math.floor(size * scale);
      canvas.height = Math.floor(size * scale);
      
      ctx.scale(scale, scale);
      ctx.font = '10px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      
      var x = size / 2;
      var y = size / 2;
      var textString = "TUTORIALSPOINT";
      ctx.fillText(textString, x, y);
   </script>
</body>
</html>

Lorsque le script s'exécutera, il générera une sortie texte, que nous avons considérée comme exemple ci-dessus, sans devenir floue.

Exemple 2

Considérant que notre dessin semble un peu flou. 

<!DOCTYPE html>
<html>
   <style>
      div {
          border: 1px solid black;
          width: 100px;
          height: 100px;
      }
      canvas, div {background-color: #F5F5F5;}
      canvas {border: 1px solid white;display: block;}
   </style>
<body>
    <table>
        <tr><td>Line on canvas:</td></tr>
        <tr><td><canvas id="tutorial" width="100" height="100"></td><td><div> </div></td></tr>
    </table>
    <script>
       var ctx = document.getElementById("tutorial").getContext("2d");
       ctx.lineWidth = 1;
       ctx.moveTo(2, 2);
       ctx.lineTo(98, 2);
       ctx.lineTo(98, 98);
       ctx.lineTo(2, 98);
       ctx.lineTo(2, 2);
       ctx.stroke();
    </script>
</body>
</html>

Lorsque vous exécutez le script ci-dessus, la fenêtre de sortie apparaîtra, affichant une ligne floue sur le canevas et une bordure de 1 pixel sur la page Web.

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!

html5 css 接口
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment spécifier en HTML si la saisie semi-automatique est activée pour un élément ou