Как я могу написать текст на элементе HTML5 canvas?

150

Можно ли писать текст на HTML5 canvas?

Budda
источник
1
Я бы порекомендовал прочитать <a href=" diveintohtml5.info/"> diveintohtml5 </ a > сайт, у него есть собственный <a href=" diveintohtml5.info/canvas.html#text"> раздел о text</a>. , Это очень хорошее чтение.
Челмерц
В дополнение к другим ответам, если вы хотите написать текст с помощью excanvas (для поддержки IE), вам понадобится дополнительный скрипт, доступный здесь: code.google.com/p/explorercanvas/issues/detail?id=6 Загрузка по умолчанию ( code.google.com/p/explorercanvas/downloads/list ) не включает в себя методы fillText и strokeText.
Кастрохендж
2
@IvanCastellanos Нашли ли вы какие-либо релевантные результаты поиска? Может быть полезно опубликовать их здесь, если вы их нашли.
Андерсон Грин
2
@IvanCastellanos - этот вопрос (по крайней мере, для меня) сейчас стоит на первом месте для "HTML-текста холста" в Google. Разве это не цель переполнения стека?
Колинкамерон
Да, это легко сделать на холсте. Я хотел бы добавить больше к вашему сообщению, чтобы вы могли показать некоторые примеры того, что вы пробовали и что вы не пробовали. Просто вопрос не очень полезен для Stackoverflow.com
Даг Хауф

Ответы:

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>

Zibri
источник
3
Есть ли способ получить ширину и размер шрифта, чтобы мы могли центрировать его? (Динамический контент)
Оливер Диксон
1
предположим: ваш холст ширина-200, высота: 100 по горизонтали : ctx.textAlign = 'center' ctx.fillText ('Hello', 100 , 10) вертикаль : ctx.textBaseline = 'middle' ctx.fillText ('Hello', 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. 

Вы можете либо поместить тег идентификатора холста в 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);
Пол Д. Уэйт
источник
4

Зависит от того, что вы хотите сделать с этим, я думаю. Если вы просто хотите написать нормальный текст, вы можете использовать .fillText().

Ян Девлин
источник
3

Да, конечно, вы можете легко написать текст на холсте, и вы можете установить имя шрифта, размер шрифта и цвет шрифта. Существует два метода для создания текста на 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

Кунчара Курниаван
источник
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

Саймон К Бхатта4я
источник
1

Легко писать текст на холсте. Допустим, ваш холст объявлен как показано ниже.

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

Дуг Хауф
источник