Maison >interface Web >Tutoriel H5 >HTML5-8 __Texte sur toile

HTML5-8 __Texte sur toile

黄舟original: 2017-02-18 14:38:051694parcourir

L'API Canvas possède de puissantes fonctions de texte. La façon d'utiliser le texte du canevas est la même que celle des autres objets de chemin : vous pouvez dessiner le contour du texte et remplir l'intérieur du texte. Le dessin du texte de l'

objet contextuel est implémenté par deux fonctions :

fillText(text, x, y, maxwidth);

StrokeText(text, x, y, maxwidth);

Deux paramètres de fonction : le paramètre de texte et pour spécifier la position du texte. Le paramètre de coordonnées, maxwidth est un paramètre facultatif, utilisé pour limiter la taille de la police et forcer la police de texte à réduire à la taille spécifiée.

De plus, il existe une fonction MeasureText(), qui renverra un objet de mesure, qui contient Spécifier la largeur d'affichage réelle du texte dans le contexte actuel

<br>

在HTML5.js 源码定义为:

Un exemple

/**@param {string} text@return {TextMetrics}*/CanvasRenderingContext2D.prototype.measureText = function(text) {};

, remplacez fillText dans le code par StrokeText(), l'effet est :

<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <title>Canvas 文本</title>
  <canvas id="trails" style="border: 1px solid;"  width="400" height="300"> </canvas>
  <script>
        function drawTrails() {
            var canvas = document.getElementById(&#39;trails&#39;);
            var context = canvas.getContext(&#39;2d&#39;);
            // 在canvas 上绘制标题文本
            context.save();
            // 字号为60px,  字体为impact
            context.font = "60px impact";
            // 将文本填充为棕色
            context.fillStyle = &#39;#996600&#39;;
            // 将文本设为居中对齐
            context.textAlign = &#39;center&#39;;
            // 在canvas顶部中央的位置
            // 以大字体的形式显示文本
            context.fillText(&#39;Happy Trails!&#39;, 200, 60, 400);
            context.restore();
        }
        window.addEventListener("load", drawTrails, true);
  </script>
</html>

Afin de garantir que le texte puisse être affiché normalement dans divers navigateurs, l'API Canvas fournit des propriétés de type CSS pour le contexte afin de garantir que l'effet d'affichage réel est hautement configurable.

Ce qui précède est le contenu de HTML5-8 __Canvas Texte Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

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：HTML5 7 __Canvas : mise à l'échelle, rotation, création d'ombresArticle suivant：HTML5 7 __Canvas : mise à l'échelle, rotation, création d'ombres

Articles Liés

Voir plus