Можно ли писать текст на 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>

Эта часть кода возвращает переменную в canvas, которая является представлением вашего холста в 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 + холст + начинающие, что стоит денег. Я купил его пару дней назад, и он показал мне много простых техник, которые были очень полезны.