As vezes, queremos que um certo algoritmo seja executado em intervalos de segundos, como um relógio virtual. Ou então queremos que o algoritmo espere um determinado tempo para dar alguma resposta para o usuário. Esses dois casos podem ser resolvidos usando um temporizador.
No Javascript tem dois tipos de temporizadores. O primeiro é o setInterval, que executa uma função a cada intervalo de tempo. Ele leva dois parâmetros: a função que queremos que seja executada e o segundo parâmetro, o intervalo de tempo em milisegundos. Vamos olhar um exemplo:
sábado, 15 de dezembro de 2012
quinta-feira, 13 de dezembro de 2012
HTML5: Tamanho do Texto no Canvas
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.
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.
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;
}
segunda-feira, 10 de dezembro de 2012
Javascript: Javascript e a tag Body
Hoje vou explicar a relação entre o elemento <Body> do HTML e o Javascript. Já aconteceu algumas vezes de eu tentar manipular elementos do <body> antes do mesmo estar carregado, uma vez que a maioria das vezes que insiro um Javascript, ele geralmente é inserido no <head>.
Inserir no <head> é aconselhável para funções, pois os mesmos tem que estar carregado antes do usuário poder mexer. Entretanto, na hora do teste esquecemos que o script ocorre logo que o navegador faz o download, então ocorre o erro.
Inserir no <head> é aconselhável para funções, pois os mesmos tem que estar carregado antes do usuário poder mexer. Entretanto, na hora do teste esquecemos que o script ocorre logo que o navegador faz o download, então ocorre o erro.
domingo, 9 de dezembro de 2012
Javascript: Problemas com Atributos de um Classe
Um problema que demorei, mas foi bem simples de resolver. O caso é o seguinte: criei uma classe no Javascript, como exemplo abaixo:
function minhaClasse(a,b){
this.a = a;
this.b = b;
this.c = 0;
function calculaC(){
}
obj.onload = calculaC;
obj.src = "oi.html"
}
function minhaClasse(a,b){
this.a = a;
this.b = b;
this.c = 0;
function calculaC(){
}
obj.onload = calculaC;
obj.src = "oi.html"
}
HTML5/Javascript: Importando outro arquivo JS por Script
A maioria das linguagens de programações permite que você crie scripts ou código fontes em arquivos separados e com uma só palavra, você pode importar esse código externo para o seu código. E havendo uma grande vantagem que é você poder alterar em um lugar e todos os outros códigos que o utilizam é alterado também.
Entretanto, Javascript não tem essa funcionalidade por padrão, o que complica essa versatilidade. Então pesquisei e descobri uma forma de implementar essa funcionalidade. Vamos para o código:
function include(file_path, feedback){
var j = document.createElement("script");
j.type = "text/javascript";
j.async = true;
j.onload = feedback;
j.src = file_path;
document.head.appendChild(j);
}
Entretanto, Javascript não tem essa funcionalidade por padrão, o que complica essa versatilidade. Então pesquisei e descobri uma forma de implementar essa funcionalidade. Vamos para o código:
function include(file_path, feedback){
var j = document.createElement("script");
j.type = "text/javascript";
j.async = true;
j.onload = feedback;
j.src = file_path;
document.head.appendChild(j);
}
Assinar:
Postagens (Atom)