Comment dessiner du texte à l'aide d'un canevas HTML5-Tutoriel H5-php.cn

Comment dessiner du texte à l'aide d'un canevas HTML5

不言

Libérer： 2020-10-21 09:20:25

original

6037 Les gens l'ont consulté

Comment utiliser le canevas HTML5 pour dessiner du texte : créez d'abord l'exemple de fichier HTML correspondant, puis utilisez la méthode fillText pour dessiner le texte rempli sur le canevas.

Comment dessiner du texte à l'aide d'un canevas HTML5

Si vous souhaitez utiliser HTML5 Canvas pour dessiner du texte, vous devez utiliser la méthode fillText() du contexte du canevas. Examinons le contenu spécifique ci-dessous.

HTML5 canvas

Regardons d'abord un exemple spécifique

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8"/>
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var context = canvas.getContext(&#39;2d&#39;);
    context.font = &#39;normal 18pt "楷体"&#39;;
    context.fillText(&#39;Hello HTML Canvas World!&#39;, 60, 200);
}
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

Copier après la connexion

Explication :

Le code suivant obtient l'objet canevas et Obtenez le contexte.

var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  var context = canvas.getContext(&#39;2d&#39;);

Copier après la connexion

Ci-dessous le code pour dessiner les personnages. Spécifie les informations de police pour les caractères à dessiner dans la propriété font. Utilisez la méthode fillText() pour dessiner une chaîne sur le canevas. La chaîne à dessiner en premier argument, les coordonnées X et Y du début du dessin sont données aux deuxième et troisième arguments.

context.font = &#39;normal 18pt "楷体"&#39;;
context.fillText(&#39;Hello HTML Canvas World!&#39;, 60, 200);

Copier après la connexion

Exécuter les résultats

Utilisez un navigateur Web pour afficher le fichier HTML ci-dessus. Obtenez le résultat d’affichage ci-dessous.

HTML5 canvas

Voyons ensuite comment changer la couleur du texte

Le code est le suivant

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var context = canvas.getContext(&#39;2d&#39;);
    context.font = &#39;normal 18pt "楷体"&#39;;
    context.fillStyle = &#39;red&#39;;
    context.fillText(&#39;你好，PHP中文网！！！&#39;, 60, 200);
}
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="360" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

Copier après la connexion

Instructions :

Pour changer la couleur du texte, vous devez définir la propriété fillStyle sur la couleur du texte.

 context.font = &#39;normal 18pt "楷体"&#39;;
 context.fillStyle = &#39;red&#39;;
 context.fillText(&#39;你好，PHP中文网！！！&#39;, 60, 200);

Copier après la connexion

Résultats en cours d'exécution :

Utilisez un navigateur Web pour afficher le fichier HTML ci-dessus. Vous obtiendrez l'effet comme indiqué dans l'image ci-dessous, avec des polices rouges dessinées.

HTML5 canvas

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!