HTML5-8 __キャンバステキスト-H5 チュートリアル-php.cn

HTML5-8 __キャンバステキスト

黄舟

リリース： 2017-02-18 14:38:05

オリジナル

1678 人が閲覧しました

キャンバス API には強力なテキスト関数が備わっています。キャンバステキストの操作方法は、他のパスオブジェクトの操作と同じです。テキストのアウトラインを描画したり、テキストの内部を塗りつぶしたりすることができます。

context オブジェクトのテキスト描画は、次の 2 つの関数によって実装されます:

fillText(text, x, y, maxwidth); Lun Guo の説明

2 つの関数のパラメータ: テキストパラメータと座標パラメータmaxwidth はオプションのパラメータで、フォントサイズを制限し、テキストフォントを指定したサイズに強制的に縮小するために使用されます。

measureText () 関数もあります。これは、現在のコンテキスト環境での指定されたテキストの実際の表示幅

<br>

ログイン後にコピー

在HTML5.js 源码定义为:

ログイン後にコピー

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

ログイン後にコピー

例

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

ログイン後にコピー

、コード内のfillTextをストロークText()に置き換え、効果:

各ブラウザでテキストが正常に表示されることを保証するために、Canvas API はコンテキストに CSS のようなプロパティを提供し、実際の表示効果が高度に構成可能であることを保証します。