|
HTML5 inclui um mecanismo para a colocação de texto na tag <canvas>. Isso fornece uma maneira muito mais dinâmica, flexível para apresentar o texto que as versões anteriores.Você pode criar alguns bons efeitos combinando a colocação do texto com o desenho de retângulos, linhas, arcos, e as imagens que já demonstrou.
Para desenhar texto em uma tela, a propriedade mais importante e métodos são:
fonte - define as propriedades da fonte de texto
fillText ( texto, x, y ) - Desenha texto "cheio" na tela
strokeText ( texto, x, y ) - Desenha o texto na tela (não preencher)
Usando fillText ():
Exemplo
Escrever um texto cheio de alta 30px na tela, usando a fonte "Arial":
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:
1px solid #d3d3d3;">
O navegador não suporta a tag canvas do HTML5
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Olá mundo",10,50);
</script>
</body>
</html>
Usando strokeText ():
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:
1px solid #d3d3d3;">
O navegador não suporta a tag canvas do HTML5
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Olá Mundo",10,50);
</script>
</body>
</html>
Veja Mais:
- Desenhar curvas ou arcos em canvas com HTML5- Criar um retangulo sobre outro transparente com canvas no HTML5
- Coordenadas do Canvas no HTML5
- Elemento canvas em HTML5
- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5
0 comentários:
Postar um comentário