Чи можливо написати текст на HTML5 canvas?

Малювання тексту на полотні

Розмітка:

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

Canvasтекстова підтримка насправді дуже добре - ви можете контролювати font, size, color, horizontal alignment, vertical alignment, і ви також можете отримати текстові метрики , щоб отримати ширину тексту в пікселях. Крім того, ви можете також використовувати полотно transformsдля rotate, stretchі навіть invertтекст.

Написати текст на полотні дуже просто. Не було зрозуміло, чи хочете ви, щоб хтось вводив текст на сторінку 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. 

Ви можете або розмістити тег ідентифікатора полотна в 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);

Я думаю, залежить від того, що ви хочете з цим зробити. Якщо ви просто хочете написати якийсь звичайний текст, який ви можете використовувати .fillText().

Так, звичайно, ви можете легко писати текст на полотні, і ви можете встановити назву шрифту, розмір шрифту та колір шрифту. Існує два способи побудови тексту на Canvas, тобто 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

Я знайшов хороший підручник на 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

Написати текст на полотно легко. Скажімо, що полотно оголошено як нижче.

<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 є посібник для початківців для http://www.sezon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4?ie=UTF8&qid=1398113376&sr=8-4&keywords=html5 + полотно + початківці, на які варто коштувати. Я придбав його пару днів тому, і це показало мені безліч простих прийомів, які були дуже корисними.