Maison > interface Web > Tutoriel H5 > le corps du texte

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!