Mais um artigo sobre Canvas e Texto. O caso de hoje é bem interessante: Digamos que eu esteja criando um botão para usar no Canvas, e na aparência do botão, quero que tenha um rótulo. Mas eu quero que o botão se adapte ao tamanho do texto que vou inserir. Como faço isso? Para nossa alegria, o contexto possui um método para fazer essa medida, o método measureText.
Sempre que for usar esse método, faça depois de configurar a fonte, conforme o código embaixo:
ctx.font = "30px Arial";
var tam = ctx.measureText("Olááá Enfermeiraaa");
ctx.strokeRect(10, 10, tam.width, 30);
Esse código cria um retângulo que é capaz de envolver o texto que eu quero. O método measureText retorna um objeto que possui a largura (atributo width) do texto. Sim, somente a largura, pois a altura do texto é definida pela fonte, que neste caso é 30.
Então pessoal, espero que esse tutorial rápido possa ser útil.
Mostrando postagens com marcador Canvas. Mostrar todas as postagens
Mostrando postagens com marcador Canvas. Mostrar todas as postagens
quinta-feira, 13 de dezembro de 2012
quarta-feira, 12 de dezembro de 2012
HTML5: Alinhamento de Texto no Canvas
Já vimos uma vez que podemos inserir textos em uma Canvas, mas eu só mostrei como mudar a fonte e como usar os métodos fillText e strokeText. Mas suponhamos que você queira que o seu texto fique exatamente no centro da Canvas, como faria isso?
Isso não é complicado. Podemos alterar a linha base do texto para deixar no meio. Então, a posição y que indicamos nos métodos fillText ou strokeText vai estar indicando o meio da imagem quanto a posição vertical.
Isso não é complicado. Podemos alterar a linha base do texto para deixar no meio. Então, a posição y que indicamos nos métodos fillText ou strokeText vai estar indicando o meio da imagem quanto a posição vertical.
terça-feira, 11 de dezembro de 2012
HTML5: Criando Elementos Clicáveis no Canvas
Uma das grandes problemas de quem está começando a fazer jogos no HTML5. Para fins de navegador, Canvas é como uma imagem qualquer, e qualquer coisa que é desenhada nessa imagem, vira parte da mesma. Agora, a grande pergunta: como é que vou clicar naquele botão que coloquei no Canvas, se ele é apenas um monte de pixels?
Aí entra a importância de criarmos objetos para descrever o que queremos. Vamos supor que queremos um botão retangular. Para isso, vamos criar uma classe para descrever esse botão:
function Botao(x,y,w,h){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
Aí entra a importância de criarmos objetos para descrever o que queremos. Vamos supor que queremos um botão retangular. Para isso, vamos criar uma classe para descrever esse botão:
function Botao(x,y,w,h){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
terça-feira, 4 de dezembro de 2012
HTML5: Usando o Canvas
1. Conhecendo a Tag <Canvas>
Hoje comecei meus estudos para desenvolvimento de jogos em HTML5. A primeira coisa que aprende é a tag Canvas, que é onde o jogo vai ser desenhado. Vamos pegar um exemplo de código:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="game" width=800 height=600>
Seu navegador não suporta HTML 5
</canvas>
</body>
</html>
Assinar:
Postagens (Atom)