Apakah mungkin menulis teks pada HTML5 canvas?

Menggambar teks pada Kanvas

Markup:

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

Skrip (dengan beberapa opsi berbeda):

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

Lihatlah dokumentasi MDN dan contoh JSFiddle ini .

Canvasdukungan teks sebenarnya cukup bagus - Anda dapat mengontrol font, size, color, horizontal alignment, vertical alignment, dan Anda juga bisa mendapatkan metrik teks untuk mendapatkan lebar teks dalam pixel. Selain itu, Anda juga dapat menggunakan kanvas transformsuntuk rotate, stretchdan bahkan invertteks.

Sangat mudah untuk menulis teks di atas kanvas. Tidak jelas apakah Anda ingin seseorang memasukkan teks di halaman HTML dan kemudian memiliki teks itu muncul di kanvas, atau jika Anda akan menggunakan JavaScript untuk menulis informasi ke layar.

Kode berikut akan menulis beberapa teks dalam berbagai font dan format ke kanvas Anda. Anda dapat memodifikasinya karena Anda ingin menguji aspek-aspek penulisan lainnya pada kanvas.

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

Anda dapat menempatkan tag ID kanvas dalam HTML dan kemudian merujuk nama atau Anda dapat membuat kanvas dalam kode JavaScript. Saya pikir sebagian besar saya melihat <canvas>tag dalam kode HTML dan kadang-kadang melihatnya dibuat secara dinamis dalam kode JavaScript itu sendiri.

Kode:

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

Tergantung pada apa yang ingin Anda lakukan dengannya, saya kira. Jika Anda hanya ingin menulis teks biasa, Anda dapat menggunakannya .fillText().

Ya tentu saja Anda dapat menulis teks di atas kanvas dengan mudah, dan Anda dapat mengatur nama font, ukuran font dan warna font. Ada dua metode untuk membangun teks di atas Kanvas, yaitu fillText () dan strokeText () . Metode fillText () digunakan untuk membuat teks yang hanya bisa diisi dengan warna, sedangkan strokeText () digunakan untuk membuat teks yang hanya bisa diberi warna outline. Jadi jika kita ingin membuat teks yang penuh warna dan memiliki garis warna, kita harus menggunakan keduanya.

di sini contoh lengkap, cara menulis teks di atas kanvas:

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

Ini demo untuk ini, dan Anda dapat mencoba sendiri untuk modifikasi apa pun: http://okeschool.com/examples/canvas/html5-canvas-text-color

Saya menemukan tutorial yang bagus di oreilly.com .

Kode contoh:

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

courtesy: @Ashish Nautiyal

Sangat mudah untuk menulis teks ke kanvas. Katakanlah kanvas Anda dinyatakan seperti di bawah ini.

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

Bagian kode ini mengembalikan variabel ke kanvas yang merupakan representasi kanvas Anda dalam HTML.

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

Kode berikut mengembalikan metode untuk menggambar garis, teks, mengisi ke kanvas Anda.

  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>

Ada panduan pemula di Amazon untuk menyalakan http://www.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4?ie=UTF8&qid=1398113376&sr=8-4&keywords=html5 + kanvas + pemula yang bernilai uang. Saya membelinya beberapa hari yang lalu dan itu menunjukkan kepada saya banyak teknik sederhana yang sangat berguna.