Como posso escrever texto num elemento de tela HTML5?
é possível escrever texto no HTML5 canvas?
8 answers
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>Desenhar o texto numa área de desenho
Marca:
<canvas id="myCanvas" width="300" height="150"></canvas>
Script (com algumas opções diferentes):
<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>
Canvas suporte de texto é realmente muito bom - você pode controlar font, size, color, horizontal alignment, vertical alignment, e você também pode obter métrica do texto para obter o texto de largura em pixels. Além disso, você também pode usar canvas transforms para rotate, stretch e até texto.
O seguinte código irá escrever algum texto em diferentes tipos de letra e formatos para a sua área de desenho. Você pode modificar isto como você deseja testar outros aspectos da escrita em uma tela.
<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.
Pode colocar a marca de ID da área de desenho no HTML e então faça referência ao nome ou você pode criar a tela no código JavaScript. Eu acho que, na maioria das vezes, vejo a tag <canvas> no código HTML e, ocasionalmente, vejo-a criada dinamicamente no próprio código JavaScript.
Código:
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().
Sim, claro que pode escrever um texto sobre a área de desenho com facilidade, e poderá definir o nome da fonte, o tamanho da letra e a cor da fonte. Existem dois métodos para construir um texto sobre tela, ou seja fillText () e strokeText () . fillText() método é usado para fazer um texto que só pode ser preenchido com a cor, enquanto strokeText() é usado para fazer um texto que só pode ser dado um destaque de cor. Então, se quisermos construir um texto que preencha com cor e tenha cor de contorno, devemos usar ambos.
Aqui o exemplo completo, Como Escrever texto na tela:
<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>
Eu encontrei um bom tutorial sobre oreilly.com.
Código de exemplo:
<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>
Cortesia: @Ashish Nautiyal
<html>
<canvas id="YourCanvas" width="500" height="500">
Your Internet Browser does not support HTML5 (Get a new Browser)
</canvas>
</html>
Esta parte do Código devolve uma variável à área de desenho que é uma representação da sua área de desenho em HTML.
var c = document.getElementById("YourCanvas");
O seguinte código devolve os métodos para desenhar linhas, texto, preenche a sua área de desenho.
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>