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

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

142 голосов
/ 13 сентября 2010

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

Ответы [ 8 ]

226 голосов
/ 26 апреля 2012 

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>
7 голосов
/ 19 июля 2014

Нанесение текста на холст

Markup: 

<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 голосов
/ 12 октября 2011

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

5 голосов
/ 17 апреля 2014

Текст на холсте действительно легко написать.Было неясно, хотите ли вы, чтобы кто-то вводил текст на 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 голосов
/ 13 сентября 2010

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

3 голосов
/ 16 декабря 2014

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

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

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

На Амазоне есть руководство для новичков по разжиганию 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 голос
/ 22 августа 2013

Я нашел хорошее руководство на 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...