Можно ли написать текст на HTML5 canvas?
Как написать текст в элементе холста HTML5?
Ответ 1
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>Ответ 2
Поддержка текста в холсте на самом деле довольно хороша - вы можете контролировать шрифт, размер, цвет, горизонтальное выравнивание, вертикальное выравнивание, а также получать текстовые метрики, чтобы получить ширину текста в пикселях. Кроме того, вы также можете использовать преобразования холста для поворота, растяжения и даже инвертирования текста.
Ответ 3
Очень легко написать текст на холсте. Неясно, хотите ли вы, чтобы кто-то вводил текст на странице 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.
Вы можете поместить тег идентификатора canvas в 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()
Ответ 5
Вот как нарисовать текст в/используя Canvas:
Разметка:
<canvas id="myCanvas" width="300" height="150"></canvas>
Script (с несколькими различными опциями):
<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, т.е. 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
Ответ 7
Я нашел хороший учебник по 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
Ответ 8
Легко писать текст на холст. Предположим, что вы можете объявить холст, как показано ниже.
<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.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref = sr_1_4? ie = UTF8 & qid = 1398113376 & sr = 8-4 & keywords = html5 + canvas + beginners, который стоит денег. Я купил его пару дней назад, и он показал мне много простых приемов, которые были очень полезны.