recherche

Maison >interface Web >Tutoriel H5 >Comment dessiner le contour du texte à l'aide d'un canevas HTML5

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

不言
不言original
2018-12-03 16:55:135315parcourir

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>

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;);

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);

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!

Déclaration：
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
Article précédent：Comment dessiner du texte à l'aide d'un canevas HTML5Article suivant：Comment dessiner du texte à l'aide d'un canevas HTML5

Articles Liés

Voir plus