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

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

不言

Libérer： 2018-12-07 09:35:34

original

5252 Les gens l'ont consulté

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

HTML5 canvas

Regardons d'abord un exemple spécifique

Le code est le suivant

Créez le fichier HTML suivant

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <style type="text/css">
    <!--
    /*背景颜色和背景图*/
    .canvas {
      background-color: #FFFFFF;
      background-image: url("img/flower.jpg");
    }
    -->
  </style>
  <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 28pt "楷体"&#39;;
    context.strokeText(&#39;你好，PHP中文网！！！&#39;, 60, 200);
  }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="360" class="canvas"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

Copier après la connexion

Description :

Ce qui suit obtiendra l'objet canevas et obtiendra 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

Ce qui suit est le code pour dessiner les personnages. Spécifiez les informations de police du caractère à dessiner dans la propriété font, utilisez la méthode StrokeText() pour dessiner le contour de la chaîne sur le canevas, comme premier paramètre la chaîne dessinée, la coordonnée X et la coordonnée Y du début du dessin sont données au deuxième et au troisième paramètre.

context.font = &#39;normal 28pt "楷体"&#39;;
context.strokeText(&#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 d’affichage comme indiqué ci-dessous.

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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