HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5キャンバスctx.fillTextは改行を行いません

fillText（）メソッドは、塗りつぶされたテキストをキャンバスに描画します。行を分割したい場合は、新しい行でテキストを分割し、filltext（）を複数回呼び出すことでこれを行うことができます。そうすることで、テキストを線に分割し、各線を別々に描画します。

次のコードスニペットを実行してみてください-

var c = $('#c')[0].getContext('2d');
c.font = '12px Courier';
alert(c);

var str = 'first line \nsecond line...';
var a = 30;
var b = 30;
var lineheight = 15;
var lines = str.split('\n');

for (var j = 0; j<lines.length; j++)
c.fillText(lines[j], a, b + (j*lineheight) );
// for canvas
<canvas id="c" width="200" height="200"></canvas>

// CSS 

canvas {
   background-color: #FFCE9E;
}

  1. HTML<var>タグ

    HTMLの要素は、計算用の数式を表示するために使用されます。 ここで、HTMLでタグを実装する例を見てみましょう- 例 <!DOCTYPE html> <html> <body> <h2>Mathematical Equation</h2> <p>Sample equation: <var>2x</var> - <var>2z</var> = <var>3y</var> + 9 </body> </html> 出力 上

  2. HTMLCanvasの基本

    Webページにキャンバスを描画するには、HTML5キャンバス要素を使用します。 要素を使用すると、JavaScriptを使用してグラフィックを描画できます。キャンバスを使用して、線、長方形、ベジェ曲線などを描画します。 すべてのキャンバスには、キャンバスの高さと幅を表す2つの要素があります。つまり、それぞれ高さと幅です。 これに伴い、以下のコードスニペットに示すように、canvasのIDも設定する必要があります- <canvas id = "newCanvas" width = "100" height = "100">