web-dev-qa-db-ja.com

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

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

htmlhtml5canvas
141
Budda
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>
226
Zibri

キャンバスにテキストを描画する

マークアップ：

<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 documentation およびこの JSFiddle の例をご覧ください。

7
Lior Elrom

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

6
Eric Rowell

キャンバスにテキストを書くのは本当に簡単です。 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コードでキャンバスを作成できます。ほとんどの場合、HTMLコードに<canvas>タグがあり、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);
5
user3376708

あなたがそれで何をしたいのかに依存します。通常のテキストを書きたい場合は、.fillText()を使用できます。

4
Ian Devlin

はい、もちろんキャンバスに簡単にテキストを書くことができ、フォント名、フォントサイズ、フォントの色を設定できます。 Canvasでテキストを作成するには、2つの方法があります。 fillText（） そして strokeText（）。 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

3
Kuncara Kurniawan

キャンバスにテキストを書くのは簡単です。キャンバスが次のように宣言されているとしましょう。

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

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

  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 + beginners それだけの価値はあります。私は数日前にそれを購入し、それは私に非常に有用な多くの簡単なテクニックを示しました。

1
Doug Hauf

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

1
Simon K Bhatta4ya