HTML5-8 __Texte sur toile-Tutoriel H5-php.cn

HTML5-8 __Texte sur toile

黄舟

Libérer： 2017-02-18 14:38:05

original

1641 Les gens l'ont consulté

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>

Copier après la connexion

在HTML5.js 源码定义为:

Copier après la connexion

Un exemple

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

Copier après la connexion

, 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>

Copier après la connexion

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