150

HTML5でテキストを書くことは可能canvasですか？

html canvas

— ブッダ
ソース

1

私は<a href=" diveintohtml5.info/">を通じて読書をお勧めしますdiveintohtml5 </ A >サイト、それが持つ独自の<a href=" diveintohtml5.info/canvas.html#text">章についてtext</a>の。とても良い読み物です。

— chelmertz

他の回答に加えて、excanvasを使用してテキストを記述したい場合（IEサポート用）、追加のスクリプトが必要になります。次の場所から入手できます：code.google.com/p/explorercanvas/issues/detail?id=6デフォルトのダウンロード（code.google.com/p/explorercanvas/downloads/list）には、fillTextメソッドとstrokeTextメソッドは含まれていません。

— カストロヘンジ2010

2

@IvanCastellanos関連する検索結果は見つかりましたか？あなたが何かを見つけた場合、それらをここに投稿すると役立つかもしれません。

— アンダーソングリーン

2

@IvanCastellanos-（少なくとも私にとっては）この質問がGoogleの「HTMLキャンバステキスト」のトップになりました。それはスタックオーバーフローの目的ではありませんか？

— コリンカメロン2013年

はい、Canvasで簡単に実行できます。投稿にさらに追加して、試行したことと試行していないことの例をいくつか示します。Stackoverflow.comにとって、問題はそれほど有益ではありません

— Doug Hauf

234

var canvas = document.getElementById("my-canvas");
var context = canvas.getContext("2d");

context.fillStyle = "blue";
context.font = "bold 16px Arial";
context.fillText("Zibri", (canvas.width / 2) - 17, (canvas.height / 2) + 8);

#my-canvas {
  background: #FF0;
}

<canvas id="my-canvas" width="200" height="120"></canvas>

スニペットを展開

— ジブリ
ソース

3

フォントの幅とサイズを取得して中央揃えにする方法はありますか？（動的コンテンツ）

— Oliver Dixon 2014

1

キャンバスの幅-200を、高さ：前提と100 水平：ctx.textAlign = 'センター' ctx.fillText（ 'こんにちは'、100、10）縦：ctx.textBaseline = '真ん中' ctx.fillText（ 'こんにちは'、10 、50）

— tomision

ドキュメンテーション：fillText

— jpaugh

7

キャンバスにテキストを描く

マークアップ：

<canvas id="myCanvas" width="300" height="150"></canvas>

スクリプト（いくつかの異なるオプションを使用）：

<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.font = 'italic 18px Arial';
    ctx.textAlign = 'center';
    ctx. textBaseline = 'middle';
    ctx.fillStyle = 'red';  // a color name or by using rgb/rgba/hex values
    ctx.fillText('Hello World!', 150, 50); // text and position
</script>

MDNのドキュメントとこのJSFiddleの例を確認してください。

— リオ・エルロム
ソース

6

Canvasテキストのサポートは、実際にはかなり良いです-あなたがコントロールすることができfont、size、color、horizontal alignment、vertical alignment、、あなたはまた、テキストメトリックは、ピクセル単位でのテキストの幅を取得するために取得することができます。また、あなたはまた、キャンバスを使用することができますtransformsしrotate、stretchさらにはinvertテキスト。

— エリック・ローウェル
ソース

5

キャンバスにテキストを書くのは本当に簡単です。HTMLページにテキストを入力してそのテキストをキャンバスに表示させるか、JavaScriptを使用して画面に情報を書き込むかは明確ではありませんでした。

次のコードは、いくつかのテキストをさまざまなフォントとフォーマットでキャンバスに書き込みます。キャンバスへの書き込みの他の側面をテストしたい場合は、これを変更できます。

 <canvas id="YourCanvasNameHere" width="500" height="500">Canvas not supported</canvas>

 var c = document.getElementById('YourCanvasNameHere');
 var context = c.getContext('2d'); //returns drawing functions to allow the user to draw on the canvas with graphic tools.

キャンバスIDタグをHTMLに配置して名前を参照するか、JavaScriptコードでキャンバスを作成できます。ほとんど<canvas>の場合、HTMLコードでタグが表示され、JavaScriptコード自体で動的に作成されたタグが表示されることもあります。

コード：

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.font = 'bold 10pt Calibri';
  context.fillText('Hello World!', 150, 100);
  context.font = 'italic 40pt Times Roman';
  context.fillStyle = 'blue';
  context.fillText('Hello World!', 200, 150);
  context.font = '60pt Calibri';
  context.lineWidth = 4;
  context.strokeStyle = 'blue';
  context.strokeText('Hello World!', 70, 70);

— ポール・D・ウェイト
ソース

4

あなたがそれで何をしたいかによりますね。普通のテキストを書きたいだけなら、使うことができます.fillText()。

— イアン・デブリン
ソース

3

もちろん、キャンバスにテキストを簡単に書き込むことができ、フォント名、フォントサイズ、フォントの色を設定できます。Canvasでテキストを作成するには、fillText（）とstrokeText（）の 2つの方法があります。 fillText（）メソッドは、色のみで塗りつぶすことができるテキストを作成するために使用されます。一方、strokeText（）は、アウトラインの色のみを指定できるテキストを作成するために使用されます。したがって、色で塗りつぶされたアウトライン色を持つテキストを作成する場合は、両方を使用する必要があります。

ここに完全な例、キャンバスにテキストを書き込む方法：

<canvas id="Canvas01" width="400" height="200" style="border:2px solid #bbb; margin-left:10px; margin-top:10px;"></canvas>

<script>
  var canvas = document.getElementById('Canvas01');
  var ctx = canvas.getContext('2d');

  ctx.fillStyle= "red";
  ctx.font = "italic bold 35pt Tahoma";
  //syntax : .fillText("text", x, y)
  ctx.fillText("StacOverFlow",30,80);

</script>

ここでこれのデモ、そしてあなたはどんな修正のためにあなた自身を試すことができます： http://okeschool.com/examples/canvas/html5-canvas-text-color

— クンカラ・クルニアワン
ソース

1

oreilly.comで良いチュートリアルを見つけました。

コード例：

<canvas id="canvas" width ='600px'></canvas><br />
Enter your Text here .The Text will get drawn on the canvas<br />
<input type="text" id="text" onKeydown="func();"></input><br />
</body><br />
<script>
function func(){
var e=document.getElementById("text"),t=document.getElementById("canvas"),n=t.getContext("2d");
n.fillStyle="#990000";n.font="30px futura";n.textBaseline="top";n.fillText(e.value,150,0);n.fillText("thank you, ",200,100);
n.fillText("Created by ashish",250,120)
}
</script>

礼儀：@Ashish Nautiyal

— Simon K Bhatta4ya
ソース

1

キャンバスにテキストを書き込むのは簡単です。canvasが以下のように宣言されているとしましょう。

<html>
  <canvas id="YourCanvas" width="500" height="500">
   Your Internet Browser does not support HTML5 (Get a new Browser)
  </canvas>
</html>

コードのこの部分は、HTMLでのキャンバスの表現である変数をcanvasに返します。

  var c  = document.getElementById("YourCanvas");

次のコードは、線、テキスト、塗りつぶしをキャンバスに描画するためのメソッドを返します。

  var ctx = canvas.getContext("2d");

<script>
  ctx.font="20px Times Roman";
  ctx.fillText("Hello World!",50,100);

  ctx.font="30px Verdana";

  var g = ctx.createLinearGradient(0,0,c.width,0);

  g.addColorStop("0","magenta");
  g.addColorStop("0.3","blue");
  g.addColorStop("1.0","red");

  ctx.fillStyle=g; //Sets the fille of your text here. In this case it is set to the gradient that was created above. But you could set it to Red, Green, Blue or whatever.

  ctx.fillText("This is some new and funny TEXT!",40,190);
</script>

Amazonには、kindleの初心者向けガイドがあります。http： //www.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4 ？ ie = UTF8 ＆ qid = 1398113376 ＆ sr = 8-4 ＆ keywords = html5 + canvas +お金の価値がある初心者。数日前に購入しましたが、とても便利な簡単なテクニックがたくさんありました。

— ダグハウフ
ソース

HTML5キャンバス要素にテキストを書き込むにはどうすればよいですか？

キャンバスにテキストを描く