Introdução ao html

só um divisor

JavaScript para programador Fortran

Se você já sabe Fortran e agora deseja incrementar sua vagagem utilizando uma linguagem versátil e que acredito seja o futuro da comunicação, dispositivos moveis, etc., mesmo interfaces gráficas inteiras (gnome -shell) é feito com JavaScript.

Diferentemente de Fortran, o JavaScript é interpretado, ou seja, você não precisa compilar, é só colocar dentro de uma página html, de fato ele é parte integral do HTML5.

Template básico

Para que um programa em JavaScript funcione você deve colocar o programa entre os seguintes tags <script></script> que estão na linha 8 e 10:

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>O template</title>
          </head>

          <body>
            <script>
              
            </script>
          </body>
        </html>
        
O resto fica praticamente inalterado (você pode mudar o título da linha 4). Agora o arquivo deve ser salvo com a extensão .html, por exemplo meuPrimeiroScript.html

Variáveis

Todas as variáveis se definem com o tag var. Além disso, você não precisa se preocupar com o tipo de variável que será utilizado

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Meu primeiro script</title>
          </head>

          <body>
            <script>
              var a, b, c;

              a = 5.0;
              b = 2.0;
              c = a + b;

              resultado = "o resultado da soma eh " + c;

              document.write(resultado);
            </script>
          </body>
        </html>
        

fig 01

Observe que o resultado da soma foi armazenado na variável c. Note que é possível somar uma variável numérica a uma variável de tipo string (character em fortran). Para imprimir de forma simples podemos utilizar a função document.write

Uma nota importante é que o JavaScript é sensitivo ao tamanho da caixa, são diferentes as variáveis casa, Casa, CASA, etc, da mesma forma como todas as funções, e palavras reservadas da linguagem.

Funções matemáticas

Para se acessar as funções matemáticas se utiliza a função Math. colocando depois do ponto a função desejada. Entre as funções acessíveis uma é muito usado por nos, a função geradora de números aleatórios: Math.random() (no intervalo [0, 1)), vejamos como calcular a altura que um corpo atinge uma vez jogado para cima com um angulo tg em graus e velocidade v:

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Máxima altura</title>
          </head>

          <body>
            <script>
              var h, v, tg, tr, senoT;
            
              v  = 10.0;
              tg = 30.0;

              //convertendo para radianos
              tr = Math.PI * tg / 180.0;

              //Calculo da altura
              senoT = Math.sin(tr);
              h = (0.5 * Math.pow(v,2.0) * math.pow(senoT,2.0)) / 9.8;

              resultado = "A altura máxima do objeto é = " + h;
            
              document.write(resultado);
            </script>
          </body>
        </html>
        

fig 02

Decisões

Similar ao fortran as decisões são feitas com o if, else if e else, mas a diferença do Fortran, os blocos não terminam em end if, neste caso os blocos são delimitados por chaves: { }, vejamos um exemplo:

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Sempre Bhaskara</title>
          </head>

          <body>
            <script>
              var a, b, c, radicando, pReal, pImg;
              var raiza1, raiz2

              a = 2.0;
              b = 1.0;
              c = 2.0;

              radicando = b*b - 4.0 * c * a;
              if (radicando > 0.0){
                raiz1 = -b + Math.sqrt(radicando);
                raiz2 = -b - Math.sqrt(radicando);

                document.write("Raízes reais:");
              }
              else{
                pReal = -b;
                pImag = Math.sqrt(-radicando);

                raiz1 = pReal + "+ i" + pImag;
                raiz2 = pReal + "- i" + pImag;

                document.write("Raízes Complexas:");
              }

              document.write("<br />Primeira Raiz = ");
              document.write(raiz1);

              document.write("<br />Segunda Raiz = ");
              document.write(raiz2);
            </script>
          </body>
        </html>
        

fig 03

Algumas coisas a serem observadas, a função document.write escreve direto ao navegador um srting - character em fortran (por isso as aspas nas linhas 21, 30, 33 e 36), de forma que o tag <br /> das linhas 33 e 36 será interpretado pelo html como uma nova linha.

Repetição

Para fazer "loop" o JavaScript possui uma variedade ampla de forma, similarmente a como se tem no Fortran

Laço for

Este tipo equivale ao loop Do ... End Do do Fortran, contudo como no caso anterior o laço é delimitado pelas chaves: { }. A estrutura geral desse tipo de laço é for (inicio; condição de repetição; incremento) { ... }, vejamos um exemplo onde serão gerados 25 números inteiros aleatórios entre 0 e 100:

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>O template</title>
          </head>
          
          <body>
            <script>
              var i, real, inteiro

              for (i = 0; i<25; i=i+1){            //25 numeros, de 0 até 24 de 1 em 1
                real     = 100.0 * Math.random();  //gera um número em [0, 100)
                inteiro  = Math.floor(real);       //arrendonda para baixo o número
                resposta = inteiro + "<br />";     //coloca um nova linha ao número
                document.write(resposta);          //imprime no navegador
              }
            </script>
          </body>
        </html>
        
fig 04

Laço While

O Fortran 90 eliminou esta forma obsoleta de laço, mas ele seria equivalente a um laço infinito Do onde a condição de saída é testada no inicio, dessa forma pode que o laço nem seja executado. A estrutura do laço while é a seguinte: While (condição de repetição) { ... }, vejamos o exemplo anterior com um laço como esse:

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>O template</title>
          </head>

          <body>
            <script>
              var i, real, inteiro

              i = 0;

              while (i<25){                        //enquanto i não for 25 faz
                real     = 100.0 * Math.random();  //gera um número em [0, 100)
                inteiro  = Math.floor(real);       //arrendonda para baixo o número
                resposta = inteiro + "<br />";     //coloca um nova linha ao número
                document.write(resposta);          //imprime no navegador
                i = i + 1;                         //incrementa o contado
              }
            </script>
          </body>
        </html>
        

fig 06

Laço do ... While

Esta é uma variante do laço anterior, a diferença é que ele será executado pelo menos uma vez, a estrutura é a seguinte: do { ... } While (condição de repetição); (note o ponto e virgula no final). Vejamos o mesmo exemplo:
        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>O template</title>
          </head>

          <body>
            <script>
              var i, real, inteiro

              i = 0;

              do {                                 //faz
                real     = 100.0 * Math.random();  //gera um número em [0, 100)
                inteiro  = Math.floor(real);       //arrendonda para baixo o número
                resposta = inteiro + "<br />";     //coloca um nova linha ao número
                document.write(resposta);          //imprime no navegador
                i = i + 1;                         //incrementa o contado
              } while (i<25);                      //enquanto i não for 25
            </script>
          </body>
        </html>
        

fig 07

Laços infinitos

Equivale ao laço Do infinito do Fortran. Para termos um laço infinito devemos colocar a condição de repetição como sendo verdadeira. Em JavaScript o zero sempre significa falso e qualquer outra coisa diferente de zero será verdadeiro. Agora para para o laço a condição é colocada dentro dele mediante um if, junto da função break, vejamos o exemplo:

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>O template</title>
          </head>

          <body>
            <script>
              var i, real, inteiro

              i = 0;

              do {                                 //faz
                if (i >= 25){
                  break;                           //i maior o igual a 25 sai do laço
                }
                real     = 100.0 * Math.random();  //gera um número em [0, 100)
                inteiro  = Math.floor(real);       //arrendonda para baixo o número
                resposta = inteiro + "<br />";     //coloca um nova linha ao número
                document.write(resposta);          //imprime no navegador
                i = i + 1;                         //incrementa o contado
              } while (true);                      //diferente de zero
            </script>
          </body>
        </html>
        

fig 08

Matrizes

Para definirmos uma matriz temos que atribuir a uma variável um tipo de objeto chamado Array(numero de elementos). O número de elementos não é um número escrito em pedra, você pode até nem definir quantos elementos o vetor terá e anexar novos elementos no programa propriamente dito, vejamos o programa anterior utilizando matriz:

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>O template</title>
          </head>

          <body>
            <script>
              var i, real, inteiro;
              var vetor = new Array();

              i = 0;

              do {
                real     = 100.0 * Math.random();  //gera um número em [0, 100)
                inteiro  = Math.floor(real);       //arrendonda para baixo o número
                vetor.push(inteiro);               //adiciona um novo elemento à matriz
                i = i + 1;                         //incrementa o contado
              } while (i<25);                      //enquanto i não for 25   

              for (i = 0; i<25; i++){
                resposta = vetor[i] + "<br />"; //coloca um nova linha ao número
                document.write(resposta);          //imprime no navegador                
              }
            </script>
          </body>
        </html>
        

fig 09

Se pretendemos fazer um matriz, mas do que um vetor, devemos criar um vetor de vetores. Para facilitar a compressão vou exemplificar com uma matriz 3x3:

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>O template</title>
          </head>

          <body>
            <script>
              var i, j, num, num2;
              var matriz = new Array(3);

              //cria a matriz
              for(i = 0; i<3; i++){
                matriz[i] = new Array(3);
              }

              //atribuindo valores à matriz
              for(i = 0; i<3; i++){
                for(j = 0; j<3; j++){
                  num  = 100.0 * Math.random();
                  num2 = num.toFixed(2);   //duas casa decimais
                  matriz[i][j] = num2;
                }
              }

              //Imprimindo a matriz em forma de matriz
              for(j = 0; j<3; j++){          //percorre as colunas
                for(i = 0; i<3; i++){        //percorre a linhas
                  numero =
                  document.write(matriz[i][j] + "&nbsp;&nbsp;&nbsp;"); //&nbsp; = espaço
                }
                document.write("
"); //nova linha no fim de cada linha } </script> </body> </html>

fig 09

Funções

São similares às funções em Fortran. No caso de JavaScript elas são colocadas dentro da seção do cabeçalho (entre <head></head> no template) para garantir que elas sejam lidas antes do que a página. A estrutura básica de uma função é function nomeDaFunção(argumento1, argumento2, ...){ ...}, onde os pontos entre as chaves é o lugar onde será colocado o corpo da função. Se a função devolve algum dado isso se faz com o comando return colocado dentro do corpo da função. No exemplo a seguir converteremos a solução da equação de II grau em uma função

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Sempre Bhaskara 2</title>
            
            <script language="javascript">
              function bhaskara(a, b, c){

                var solucao = new Array(3);
                var raiza1, raiz2, radicando, pReal, pImg;

                radicando = b*b - 4.0 * c * a;
                if (radicando > 0.0){
                  solucao[0] = "raízes reais";
                  solucao[1] = -b + Math.sqrt(radicando);
                  solucao[2] = -b - Math.sqrt(radicando);
                }
                else{
                  pReal = -b;
                  pImag = Math.sqrt(-radicando);

                  solucao[0] = "raízes complexas";
                  solucao[1] = pReal + "+ i" + pImag;
                  solucao[2] = pReal + "- i" + pImag;
                }
                return solucao;
              }
            </script>
            
          </head>

          <body>
            <script>
              var a, b, c;
              var resultado = new Array(3);

              a = 2.0;
              b = 1.0;
              c = 2.0;

              resultado = bhaskara(a, b, c);

              document.write(resultado[0]);
              document.write("<br />Primeira Raiz = ");
              document.write(resultado[1]);
              document.write("<br />Segunda Raiz = ");
              document.write(resultado[2]);

            </script>
          </body>
        </html>
        

fig 11

Note que nesse exemplo foi armazenado no vetor solução tanto dados numéricos como uma string. Observe que dentro do head o script tem que aparecer entre as tag <script language="javascript"> e </script>

Você pode escrever sua função em um arquivo separado, por exemplo bhaskara.js (js de javascript) e chamar desde dentro do arquivo html, suponhamos que a nossa função externa seja:

        function bhaskara(a, b, c){

          var solucao = new Array(3);
          var raiza1, raiz2, radicando, pReal, pImg;

          radicando = b*b - 4.0 * c * a;
          if (radicando > 0.0){
            solucao[0] = "raízes reais";
            solucao[1] = -b + Math.sqrt(radicando);
            solucao[2] = -b - Math.sqrt(radicando);
          }
          else{
            pReal = -b;
            pImag = Math.sqrt(-radicando);

            solucao[0] = "raízes complexas";
            solucao[1] = pReal + "+ i" + pImag;
            solucao[2] = pReal + "- i" + pImag;
          }
          return solucao;
        }
        
enquanto que o html fica:
        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Sempre Bhaskara 2</title>

            <script src="bhaskara.js"></script>

          </head>

          <body>
            <script>
              var a, b, c;
              var resultado = new Array(3);

              a = 2.0;
              b = 1.0;
              c = 2.0;

              resultado = bhaskara(a, b, c);

              document.write(resultado[0]);
              document.write("<br />Primeira Raiz = ");
              document.write(resultado[1]);
              document.write("<br />Segunda Raiz = ");
              document.write(resultado[2]);

            </script>
          </body>
        </html>
        

Document object model - DOM

Até agora nossos scripts são inertes no sentido de que não temos como interagir diretamente com eles. Para incrementar. A interação maior se conseguiu utilizando a tenologia DOM introduzida pelo W3C. Quando um navegador adere ao DOM ele permite que scripts externos manipulem os elementos html (tabelas, formularios, imagens, estilos, etc.) e até a própria janela, tratando eles como objetos dentro de uma hierarquia bem definida. Atualmente existe uma nova camada, que está sendo muito utilizada, entre o DOM e o javaScript, conhecido como jquery (conjunto de bibliotecas javascript pre definidas). Obviamente não só será visto aqui o necessário para dar alguma interatividade a nossos script (passar dados), mas pode ter certeza que o DOM é muito mais extenso, você pode re moldar toda a página via DOM.

formulários e botões

AQUI VOCÊ ESCREVE ALGO:

Acima vemos um campo que pode ser preenchido e depois acessado pelo javascript. Esse elemento html recebe é parte da opções que os formularios (<form></form>). Dentro de um formulário html podemos colocar campos de texto onde os usuario pode digitar alguma informação (uma ou múltiplas linhas), botões para enviar a informação ao script, criar caixas de seleção, listas ou menus e botões de opções. A ideia básica é que para cada um desses subelementos eu posso associar uma identificação e um nome e como javascript pode acessar um formulário via o objeto document um elemento específico qualquer da forma via algum método. Como sempre o melhor é ver uns exemplos:

botões

vamos modificar nosso script que soluciona a equação de II grau, o usuário poderá digitar os dados e o javascript vai devolver a solução

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Sempre Bhaskara 3</title>

            <script language="javascript">
              function bhaskara2(formulario){

                var solucao = new Array(3);
                var raiza1, raiz2, radicando, pReal, pImg;

                a = parseFloat(formulario["var_a"].value);
                b = parseFloat(formulario["var_b"].value);
                c = parseFloat(formulario["var_c"].value);

                radicando = b*b - 4.0 * c * a;
                if (radicando >= 0.0){
                  solucao[0] = "raízes reais";
                  solucao[1] = -b + Math.sqrt(radicando);
                  solucao[2] = -b - Math.sqrt(radicando);
                }
                else{
                  pReal = -b;
                  pImag = Math.sqrt(-radicando);

                  solucao[0] = "raízes complexas";
                  solucao[1] = pReal + "+ i" + pImag;
                  solucao[2] = pReal + "- i" + pImag;
                }
                document.getElementById("var_r1").value = solucao[1];
                document.getElementById("var_r2").value = solucao[2];
              }
            </script>

          </head>

          <body>

          <p>
            Esta página permite calcular as raízes de uma equação de II grau do tipo
            ax^2 + bx + c = 0, favor preencha os campos e clique em calcular.
          </p>
            
          <form name="sorteio" action="" method="POST">
            <p>
              a = <input id="var_a" name="var_a" type="text" size="20"/><br />
              b = <input id="var_b" name="var_b" type="text" size="20"/><br />
              b = <input id="var_c" name="var_c" type="text" size="20"/>
            </p>

            <p>
              I raiz  = <input type="text" id="var_r1" name="var_r1" value="" readonly="readonly" size="30"/><br />
              II raiz = <input type="text" id="var_r2" name="var_r2" value="" readonly="readonly" size="30"/>
            </p>

            <input type="button" value="calcula" onclick="bhaskara2(this.form);" />
          </form>
          
          </body>
        </html>
        

fig 12

Veja que retiramos o script de dentro do <body></body> e foi transformado em uma função. Além disso utilizamos o element <p></p> o qual é utilizado em html para criar parágrafos. Dentro dos marcadores do formulário, veja que o método utilizado é o método "POST" que significar enviar. Também foram colocados dentro do formulário os campos para entrada, cada um dos campos foi identificado (id) e essa identificação é utilizada na função para extrair os dados. Observe que o campo onde as soluções são devolvidas tem a opção readonly (só leitura). Para enviar os dados do formulário foi adicionado um botão, ao ser clicado (opção onclick) o botão envia o este (this) formulário (form) do documento html.

Na função você tem que retirar os dados do objeto formulário via o método .value e converter para número utilizando a função parseFloat() pois como você vê no formulário na página html eles são do tipo texto (type="text"). Para retornar os resultados utilizamos o método getElementById() (obter elemento via id) onde será atribuído um valor a aquele elemento com a identificação específica.

Radio

Radio são botões que tem a propriedade de só permitir uma escolha, em base a isso essa forma de interação é ótima para dar opções ao usuário. Para mostrar seu funcionamento vamos criar um programa de converter Celsius em Fahrenheit, ou vice-versa:

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Transforma temperatura</title>

            <script language="javascript">
              function converteTemp(selecao){

                var i;
                var tempOriginal, tempConvertida;

                tempOriginal = parseFloat(selecao["tini"].value);

                if (isNaN(tempOriginal) == true){  //checa se é um numero
                  alert ("Você deve digitar a temperatura que deseja converter");
                  return;
                }

                if (selecao["cf"].checked){
                  tempConvertida = 9.0 / 5.0 * tempOriginal + 32.0;
                }
                else if(selecao["fc"].checked){
                  tempConvertida = 5.0 / 9.0 * (tempOriginal - 32.0);
                }
                else{
                  alert("você deve escolher alguma das opções");
                  return;
                }

                document.getElementById("tfin").value = tempConvertida;
              }
            </script>
          </head>

          <body>

          <p>
            Este programa permite realizar a conversão da temperatura de Celsius para Fahrenheit ou vice-versa
          </p>

          <form name="sorteio" action="" method="POST">
            temperatura original = <input id="tini" name="tini" type="text" size="20"/><br />

            <p>
              Escolha por favor o tipo de conversão que deseja realizar:<br />
              <input type="radio" value="0" name="tipoDeConversao" id="cf"> Celsius para Fahrenheit<br />
              <input type="radio" value="1" name="tipoDeConversao" id="fc"> Fahrenheit para Celsius
            </p>

            <p>temperatura convertida  = <input type="text" id="tfin" name="tfin" value="" readonly="readonly" size="20"/></p>
            <input type="button" value="calcula" onclick="converteTemp(this.form);" />
          </form>

            </script>
          </body>
        </html>
        

fig 13

O mais importante neste script é ver que em ambos dos elementos radio foi colocado o mesmo nome (name="tipoDeConversao"), isso garante que o usuário só possa escolher uma das opções do tipoDeConversao. Um método que pode ser utilizado dentro de um script é o .length, se eu colocar na função algo como a = selecao.tipoDeConversao.length a variável receberá o número de opções que são dadas ao usuário (no caso duas).

Dentro do script utilizamos uma nova função, a função alert(), alert abre uma janela popup com a mensagem de texto colocada dentro dos parenteses.

checkbox

É outra forma de dar opções ao usuário, a diferencia com o radio é que ele permite múltiplas escolhas. Vamos repetir o exemplo anterior, mas só permitiremos que seja checada uma das caixas, se ambas são clicadas o script abrirá um popup informando que só pode escolher 1 opção, utilizando para isso o método click, que o radio também tem (além desse método, o radio e o checkbox possuem o método onclick)

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Transforma temperatura</title>

            <script language="javascript">
              function checa(caixa){
                if (opcao["cf"].checked && opcao["fc"].checked){
                  alert("Escolhe uma, não ambas opções")
                }
              }
            </script> 

            <script language="javascript">
              function converteTemp(selecao){

                var i;
                var tempOriginal, tempConvertida;

                tempOriginal = parseFloat(selecao["tini"].value);

                if (isNaN(tempOriginal) == true){  //checa se é um numero
                  alert ("Você deve digitar a temperatura que deseja converter");
                  return;
                }

                if (selecao["cf"].checked){
                  tempConvertida = 9.0 / 5.0 * tempOriginal + 32.0;
                }
                else if(selecao["fc"].checked){
                  tempConvertida = 5.0 / 9.0 * (tempOriginal - 32.0);
                }
                else{
                  alert("você deve escolher alguma das opções");
                  return;
                }

                document.getElementById("tfin").value = tempConvertida;
              }
            </script>
          </head>

          <body>

          <p>
            Este programa permite realizar a conversão da temperatura de Celsius para Fahrenheit ou vice-versa
          </p>

          <form name="sorteio" action="" method="POST">
            temperatura original = <input id="tini" name="tini" type="text" size="20"/><br />

            <p>
              Escolha por favor o tipo de conversão que deseja realizar:<br />
              <input type="checkbox" value="0" name="caixa1" id="cf"> Celsius para Fahrenheit<br />
              <input type="checkbox" value="1" name="caixa2" id="fc"> Fahrenheit para Celsius
            </p>

            <p>temperatura convertida  = <input type="text" id="tfin" name="tfin" value="" readonly="readonly" size="20"/></p>
            <input type="button" value="calcula" onclick="converteTemp(this.form);" />
          </form>

          </body>
        </html>
        

fig 14

Note que foi definida uma nova (function checa) função que cada vez que uma das checkbox é clicada ela é chamada para verificar se a outra já não foi clicada

menus ou select

O objeto select é outro que te permite realizar o mesmo trabalho de radio e checkbox. Apliquemos ele ao exemplo anterior

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Transforma temperatura</title>

              <script language="javascript">
                function converteTemp(selecao){

                  var i;
                  var tempOriginal, tempConvertida;

                  tempOriginal = parseFloat(selecao["tini"].value);

                  if (isNaN(tempOriginal) == true){  //checa se é um numero
                    alert ("Você deve digitar a temperatura que deseja converter");
                    return;
                  }

                  if (selecao.lista.value == "cf"){
                    tempConvertida = 9.0 / 5.0 * tempOriginal + 32.0;
                  }
                  else if(selecao.lista.value == "fc"){
                    tempConvertida = 5.0 / 9.0 * (tempOriginal - 32.0);
                  }

                  document.getElementById("tfin").value = tempConvertida;
                }
              </script>
            </head>

            <body>

            <p>
              Este programa permite realizar a conversão da temperatura de Celsius para Fahrenheit ou vice-versa
            </p>

            <form name="sorteio" action="" method="POST">
              temperatura original = <input id="tini" name="tini" type="text" size="20"/><br />

              <p>
                Escolha por favor o tipo de conversão que deseja realizar:
                <select name="lista">
                  <option value="cf">Celsius para Fahrenheit</option>
                  <option value="fc">Fahrenheit para Celsius </option>
                </select>
              </p>

              <p>temperatura convertida  = <input type="text" id="tfin" name="tfin" value="" readonly="readonly" size="20"/></p>
              <input type="button" value="calcula" onclick="converteTemp(this.form);" />
            </form>

          </body>
        </html>
        

fig 15

Canvas

Atualmente canvas é um dos novos elementos adicionados ao padrão html5, basicamente esse elemento é destinado a animação via javascript. Na atualidade o cambas se destina a tratar com objetos em 2D, é provavelmente que no futuro seja suportado um ambiente 3D (atualmente isso é feito via webgl). O universo fica definido em um sistema de coordenadas cartesianas localizado no IV quadrante, ou seja, se define positivo em x para a direita e em y para baixo, com origem no canto superior esquerdo

universo Canvas

O template tipico define um canvas (tamanho em pixels, como referência lembre que os monitores antigos de CRT tinham 1024x768 pixels) e dentro de uma função javascript colocada no head se atribui essa camba a alguma variável, a través da qual se manipulam os objetos com que desejamos trabalhar

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Canvas Template</title>
            <meta charset="utf-8" />

            <style type="text/css">
              canvas {
                border: 1px solid black;   /* borda   */
              }
            </style>

            <script language="javascript">
              window.onload = function (){
                var     tela = document.getElementById('minhaTela');
                var contexto = tela.getContext('2d');
              }
            </script>
          </head>

          <body>
            <p>
              Aqui embaixo está a canva
            </p>
            <canvas id="minhaTela" width="500" height="200px">
            </canvas>
          </body>
        </html>
        

canvas 01

Note que introduzimos um nova serie de comando no head do html, o controle de estilo. O css (Cascading Style Sheets - folhas de estilo) permitem definir todas as propriedades da pagina html, em especial estamos modificando as propriedades padrão do elemento canvas do html5.

O desenho do canvas se deu utilizando o comando windows.onload que informa ao navegador que a função function () deve ser carregada logo no inicio. Dentro dessa função se define uma variável (tela) a qual atribuímos a canva do html (identificada como minhaTela). Nessa variável (tela) se da inicio a renderização de duas dimensões e podemos acessar essas propriedades via a variável contexto.

Desenhando uma linha

Linha em canvas são conhecidas como path() (caminhos), como veremos no exemplo a seguir esses caminhos são inicializados, definido o ponto inicial, o ponto final e a finalmente terminamos o caminho

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Canvas Template</title>
            <meta charset="utf-8" />

            <style type="text/css">
              canvas {
                border: 1px solid black;   /* borda   */
              }
            </style>

            <script language="javascript">
              window.onload = function (){
                var     tela = document.getElementById('minhaTela');
                var contexto = tela.getContext('2d');

                contexto.beginPath();
                contexto.lineWidth = 2;
                contexto.strokeStyle = 'blue';
                contexto.moveTo(50, 20);
                contexto.lineTo(450, 180);
                contexto.stroke();

                contexto.beginPath();
                contexto.lineWidth = 2;
                contexto.strokeStyle = 'red';
                contexto.moveTo(450, 180);
                contexto.lineTo(50, 180);
                contexto.stroke();

                contexto.beginPath();
                contexto.lineWidth = 2;
                contexto.strokeStyle = 'orange';
                contexto.moveTo(50, 180);
                contexto.lineTo(50, 20);
                contexto.stroke();
                contexto.endPath();
              }
            </script>
          </head>

          <body>
            <p>
              Um triangulo desenhado com linhas
            </p>
            <canvas id="minhaTela" width="500" height="200px">
            </canvas>
          </body>
        </html>
        

canvas 02

Observe que toda linha inicia com beginPath(), mas só na última é colocado o endPath(). O método stroke() (pincelada) é o que faz tudo o trabalho de pintura, moveTo() nos coloca no inicio da pincelada e lineTo() nos leva até o fim da pincelada.

Desenhando uma retângulos

Vamos desenhar um retângulo com canto superior esquerdo em (50, 20) e largura de 250 pixels e altura de 100 pixels:

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Canvas Template</title>
            <meta charset="utf-8" />

            <style type="text/css">
              canvas {
                border: 1px solid black;   /* borda   */
              }
            </style>

            <script language="javascript">
              window.onload = function (){
                var     tela = document.getElementById('minhaTela');
                var contexto = tela.getContext('2d');

                contexto.rect(50, 20, 250, 100);
                contexto.lineWidth = 5;
                contexto.strokeStyle = 'black';
                contexto.fillStyle = 'yellow'
                contexto.fill();
                contexto.stroke();
              }
            </script>
          </head>

          <body>
            <p>
              Retângulo amarelo de bordas pretas
            </p>
            <canvas id="minhaTela" width="500" height="200px">
            </canvas>
          </body>
        </html>
        

canvas 03

Note que utilizamos o método fillStyle e fill para definir a cor de preenchimento e preencher propriamente dito.

Desenhando uma círculos

O método de desenho de círculos é bem genérico pois permite desenhar arcos, o formato é arc(x, y, radio, angulo inicial, angulo final, rotação positiva). Rotação positiva pode ser true ou false

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Canvas Template</title>
            <meta charset="utf-8" />

            <style type="text/css">
              canvas {
                border: 1px solid black;   /* borda   */
              }
            </style>

            <script language="javascript">
              window.onload = function (){
                var     tela = document.getElementById('minhaTela');
                var contexto = tela.getContext('2d');

                contexto.arc(250, 100, 50, 0, 2.0*Math.PI, true);
                contexto.lineWidth = 5;
                contexto.strokeStyle = 'black';
                contexto.fillStyle = 'yellow'
                contexto.fill();
                contexto.stroke();
              }
            </script>
          </head>

          <body>
            <p>
              Circunferência preta e círculo amarelo
            </p>
            <canvas id="minhaTela" width="500" height="200px">
            </canvas>
          </body>
        </html>
        

canvas 04

Se utilizado um konqueror será observado uma linha desde a origem até o ponto inicial da circunferência. Agora vejamos uma seção de circunferência

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Canvas Template</title>
            <meta charset="utf-8" />

            <style type="text/css">
              canvas {
                border: 1px solid black;   /* borda   */
              }
            </style>

            <script language="javascript">
              window.onload = function (){
                var     tela = document.getElementById('minhaTela');
                var contexto = tela.getContext('2d');

                contexto.arc(250, 100, 50, -Math.PI/3.0, Math.PI/3.0, false);
                contexto.lineWidth = 5;
                contexto.strokeStyle = 'black';
                contexto.fillStyle = 'yellow'
                contexto.fill();
                contexto.stroke();
              }
            </script>
          </head>

          <body>
            <p>
              Seção de circunferência preta e área amarela
            </p>
            <canvas id="minhaTela" width="500" height="200px">
            </canvas>
          </body>
        </html>
        

canvas 05

Preste atenção ao fato de que se a figura for desenhada no sentido do giro do relógio a figura seria o complemento dessa.

Figuras de formas diversas

Logicamente estou pensando em uma linha de forma geométrica que a geometria analítica possa expressar, suponhamos um cardioide $\rho = a\left(1+\cos\theta\right)$

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Canvas Template</title>
            <meta charset="utf-8" />

            <style type="text/css">
              canvas {
                border: 1px solid black;   /* borda   */
              }
            </style>

            <script language="javascript">
              window.onload = function (){
                var xo, yo, x, y, i, rho, a, n, theta, dtheta;
                var     tela = document.getElementById('minhaTela');
                var contexto = tela.getContext('2d');

                a       = 60.0;
                npontos = 50; //por volta
                dtheta  = 2.0 * Math.PI / npontos;
                xo = tela.width / 2;
                yo = tela.height / 2;

                i = 0;

                contexto.lineWidth = 5;
                contexto.strokeStyle = "#0096FF";
                contexto.beginPath();
                //move para o primeiro ponto do cardioide rho = 2a, theta = 0
                //centraliza a origem --> xo, yo
                contexto.moveTo(xo+2.0*a,yo);

                for (i = 0; i <= npontos; i++) {
                    theta  = dtheta * i;
                    rho    = a * (1.0 + Math.cos(theta));
                    x      = xo + rho * Math.cos(theta);
                    y      = yo + rho * Math.sin(theta);
                    contexto.lineTo(x, y);
                }
                contexto.fillStyle = 'yellow'
                contexto.fill();
                contexto.stroke();
                contexto.endPath();
              };
            </script>
          </head>

          <body>
            <p>
              Cardioide
            </p>
            <canvas id="minhaTela" width="500" height="200px">
            </canvas>
          </body>
        </html>
        

canvas 06

Animação

Para se obter noção de movimento a gente tem uma técnica: se criam diversos quadros com alguma sequencia lógica entre eles por exemplo entre um quadro e outro algum elemento da imagem muda sutilmente, logo esse quadro são repetidos mostrados de forma sequencial mantendo um intervalo de tempo definido entre eles, se esse intervalo for algo próximo de 60 quadros por segundos, o nosso cérebro interpretara isso como uma animação (movimento $df/dt$)

Computacionalmente falando a gente precisa de um contador de tempo e um apagador da tela para assim repintar depois. O javascript tem os dois elementos, o contador de tempo é as funções:

          window.setTimeout('funcao()', intervalo_em_milisegundos);
          window.setInterval('funcao()', intervalo_em_milisegundos);  
        
Para limpar a área tela de desenho utilizamos
          contexto.clearRect(0, 0, tela.width, tela.height);
        
O outro jeito que é similar é criar e preencher um retângulo com as dimensões da tela.
          contexto.fillRect(0, 0, tela.width, tela.height);
        
Note que tu podes escolher uma região específica de interesse para apagar simplesmente usando algo como
          contexto.clearRect(xi, yi, xf, yf);
          
          contexto.fillRect(xi, yi, xf, yf);
        
Com isso em mão a gente anima de forma relativamente simples, cria uma figura, espera um tempo, move a figura, espera um tempo, repito isso indefinidamente. Antes de cair na animação é importante notar que pode ser necessário utilizar variáveis globais (utilizar orientação a objeto até pode ser uma ideia perfeita para isto), uma variável será global (accessível por todas as funções) se ela for definida antes e fora das chave que delimitam uma dada função.

Em nossa primeira animação vamos criar um retângulo que muda de tamanho e cor

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Canvas Template</title>
            <meta charset="utf-8" />
            
            <script language="javascript">
              var tela, contexto;
              var tempo=null, n2=0;

              function teste(cor){

                var xi = 50;
                var yi = 20;
                var xf = xi + 250* Math.random();
                var yf = yi + 100* Math.random();
                contexto.beginPath();
                contexto.rect(50, 20, xf, yf);
                contexto.lineWidth = 5;
                contexto.strokeStyle = 'black';
                contexto.fillStyle = cor;
                contexto.fill();
                contexto.stroke();
              }

              function limpa(xi, xf, yi, yf){
                contexto.clearRect(xi, yi, xf, yf);
              }

              function anima(){
                var cor, v, az, am, xini, yini, xmax, ymax;

                xini = 0;
                yini = 0;
                xmax = tela.width;
                ymax = tela.height;

                limpa(xini, xmax, yini, ymax);

                v  = Math.floor(256* Math.random());
                am = Math.floor(256* Math.random());
                az = Math.floor(256* Math.random());
                cor = 'rgb(' + v +','+ am +','+ az + ')';
                teste(cor);

                n2++;
                if (n2>13){  //para animação depois de 14 frames
                  clearInterval(tempo);
                }
              }

              window.onload = function (){
                tela     = document.getElementById('minhaTela');
                contexto = tela.getContext('2d');

                tempo = setInterval('anima()', 1000);
              }
          </script>
        </head>

        <body>
          <p>
            Animação
          </p>
          <canvas id="minhaTela" width="500" height="200px">
          </canvas>
          </body>
        </html>
        

canvas 07

Na linha 17 colocamos contexto.beginPath(); para que ele apague o contexto anterior, caso contrario é vai plotar tudo de volta.

Melhoremos o nosso algoritmo colocando botões e podendo modificar os parâmetros

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Canvas Template</title>
            <meta charset="utf-8" />
          </script>
        </head>

        <script language="javascript">
          var tela, contexto;
          var tempo=null, n2, nmax;

          function teste(cor){

            var xi = 50;
            var yi = 20;
            var xf = xi + 250* Math.random();
            var yf = yi + 100* Math.random();
            contexto.beginPath();
            contexto.rect(50, 20, xf, yf);
            contexto.lineWidth = 5;
            contexto.strokeStyle = 'black';
            contexto.fillStyle = cor;
            contexto.fill();
            contexto.stroke();
          }

          function limpa(xi, xf, yi, yf){
            contexto.clearRect(xi, yi, xf, yf);
          }

          function anima(){
            var cor, v, az, am, xini, yini, xmax, ymax;

            xini = 0;
            yini = 0;
            xmax = tela.width;
            ymax = tela.height;

            limpa(xini, xmax, yini, ymax);

            v  = Math.floor(256* Math.random());
            am = Math.floor(256* Math.random());
            az = Math.floor(256* Math.random());
            cor = 'rgb(' + v +','+ am +','+ az + ')';
            teste(cor);

            n2++;
            document.getElementById("var_r1").value = n2;
            if (n2>nmax-1){
              clearInterval(tempo);
            }
          }

          function para(formulario){
              clearInterval(tempo);
          }

          function inicia (formulario){
            tela     = document.getElementById('minhaTela');
            contexto = tela.getContext('2d');

            nmax = parseFloat(formulario["var_a"].value);
            dt   = parseFloat(formulario["var_b"].value);
            n2   = 0;

            if (isNaN(nmax) == true){  //checa se é um numero
                alert ("Note que você tem que parar");
              }

            if (isNaN(dt) == true){  //checa se é um numero
                alert ("Você deve digitar o intervalo entre frames");
                return;
              }

            tempo = setInterval('anima()', dt);
          }
        </script>
        </head>

        <body>
          <h2>
            Animação
          </h2>
          <canvas id="minhaTela" width="500" height="200px">
          </canvas>

          <form name="sorteio" action="" method="POST">
            <p>
              Numero de interações = <input id="var_a" name="var_a" type="text" size="20"/><br />
              velocidade em mili segundos = <input id="var_b" name="var_b" type="text" size="20"/><br />
            </p>

            <p>
              iteração  = <input type="text" id="var_r1" name="var_r1" value="" readonly="readonly" size="30"/><br />
            </p>

            <input type="button" value="inicia" onclick="inicia(this.form)" />
            <input type="button" value="para" onclick="para(this.form)" />
          </form>
        </body>
        </html>
        

canvas 09

Em nosso próximo exemplo vamos deslocar uma corpo circular ao longo de toda a largura da canva

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Canvas Template</title>
            <meta charset="utf-8" />

            <style type="text/css">
              canvas {
                border: 1px solid black;   /* borda   */
              }
            </style>

            <script language="javascript">

              var tela, contexto, d, v, r, n, t, dt, x, y, iter;

              function inicia (formulario){
                tela     = document.getElementById('minhaTela');
                contexto = tela.getContext('2d');

                d = parseFloat(formulario["var_d"].value);
                if (isNaN(d) == true){
                  alert ("Você não digitou um comprimento valido\nusando o tamanho maximo");
                  d = parseFloat(tela.width);
                }

                v = parseFloat(formulario["var_v"].value);
                if (isNaN(v) == true){
                  alert ("Você não digitou uma velocidade valida\nusando o padrão de 10.0");
                  v = 10.0;
                }

                r = parseFloat(formulario["var_r"].value);
                if (isNaN(r) == true){
                  alert ("Você não digitou um radio valida\nusando o padrão de 10.0");
                  r = 10.0;
                }

                n = parseFloat(formulario["var_n"].value);
                if (isNaN(n) == true){
                  alert ("Você não digitou o número de frame\nusando o padrão de 30");
                  n = 30;
                }
                t  = (d-4.0*r) /v;
                dt = t /n;
                iter = 0;
                anima();
              }

              function anima(){
                x = 2.0*r;
                y = 100.0;
                contexto.arc(x, y, r, 0, 2.0*Math.PI, true);
                contexto.lineWidth = 5;
                contexto.strokeStyle = 'black';
                contexto.stroke();
                tempo = setInterval("move()", t);
              }

              function para() {
                clearInterval(tempo);
              }

              function move(){
                if (iter < n){

                  contexto.clearRect(0, 0, tela.width, tela.height);

                  x = x + v * dt;

                  contexto.beginPath();
                  contexto.arc(x, y, r, 0, 2.0*Math.PI, true);
                  contexto.lineWidth = 5;
                  contexto.strokeStyle = 'black';
                  contexto.stroke();

                  iter++;
                } else{
                  clearInterval(tempo);
                }
              }

            </script>
          </head>

          <body>
            <h2>
              Animação
            </h2>
            <canvas id="minhaTela" width="700" height="200">
            </canvas>

            <form name="sorteio" action="" method="POST">
              <p>
                Distancia (máximo 700)          = <input id="var_d" name="var_d" type="text" size="20"/><br />
                velocidade                      = <input id="var_v" name="var_v" type="text" size="20"/><br />
                radio da partícula (máximo 100) = <input id="var_r" name="var_r" type="text" size="20"/><br />
                numero de frames                = <input id="var_n" name="var_n" type="text" size="20"/><br />
              </p>

              <input type="button" value="inicia" onclick="inicia(this.form)" />
              <input type="button" value="para" onclick="para(this.form)" />
            </form>
          </body>
        </html>
        
Note que coloquei campos para ter algum controle na velocidade com que a partícula percorre todo o caminho

canvas 10

Movimento Parabólico

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Canvas Template</title>
            <meta charset="utf-8" />

            <style type="text/css">
              canvas {
                border: 1px solid black;   /* borda   */
              }
            </style>

            <script language="javascript">

              //variáveis globaos
              var tela, contexto,  vx, vy, r, n, tframe, t, dt, xo, yo, x, y, iter, LimpaSempre, LimpaInicio;

              function inicia (formulario){

                //variáveis locais
                var xmax, ymax, mensagem, tg, tr, v;

                tela     = document.getElementById('minhaTela');
                contexto = tela.getContext('2d');

                //le os dados iniciais
                tg = parseFloat(formulario["var_a"].value);
                if (isNaN(tg) == true){
                  alert ("Você não digitou um ângulo válido\nusando o valor padrão = 30");
                  tg = 30.0;
                }

                v = parseFloat(formulario["var_v"].value);
                if (isNaN(v) == true){
                  alert ("Você não digitou uma velocidade valida\nusando o padrão de 10.0");
                  v = 100.0;
                }

                r = parseFloat(formulario["var_r"].value);
                if (isNaN(r) == true){
                  alert ("Você não digitou um radio valida\nusando o padrão de 10.0");
                  r = 10.0;
                }

                n = parseFloat(formulario["var_n"].value);
                if (isNaN(n) == true){
                  alert ("Você não digitou o número de frame\nusando o padrão de 30");
                  n = 30;
                }

                tframe = parseFloat(formulario["var_tf"].value);
                if (isNaN(tframe) == true){
                  alert ("Você não digitou o tempo entre frame\nusando o padrão de 1000/60");
                  tframe = 1000.0/60.0;
                }

                //Verifica radio
                if (formulario["tp"].checked){
                  LimpaSempre = false;
                }
                else if(formulario["up"].checked){
                  LimpaSempre = true;
                }
                else{
                  alert("você não se mostra tudo o só o ponto se movendo\nMostrando só o ponto se movendo");
                  LimpaSempre = true;
                }

                //verifica checkbox
                if (formulario["compara"].checked){
                  LimpaInicio = false;
                } else{
                  LimpaInicio = true;
                }

                //converte para radianos
                tr = (Math.PI / 180.0)*tg;

                //componentes da velocidade
                vx = v * Math.cos(tr);
                vy = v * Math.sin(tr);

                //Calculo do tempo de voo
                tv = 2.0*vy / 9.8;

                //Calculo do alcance maximo
                xmax = vx * tv;
                dt = tv / n;

                if (xmax > (tela.width-4.0*r)){
                  mesagem = 'A canva tem '+tela.width+ '\nO projetil vai atingir Xmax = '+xmax;
                  alert(mesagem);
                  dt = ((tela.width-4.0*r) / vx) / n;
                }

                //altura maxima
                ymax = vy * (tv / 2.0)-4.9*(tv / 2.0)*(tv / 2.0);
                if (ymax > (tela.height-4.0*r)){
                  mesagem = 'A canva tem '+tela.height+ '\nO projetil vai atingir Ymax = '+ymax;
                  alert(mesagem);
                }

                xo = 2.0*r;
                yo = tela.height-2.0*r;
                anima();
              }

              function anima(){
                x = xo;
                y = yo;
                t = -dt;
                iter = -1;

                //caso verdadeiro só mostra 1 trajetória
                if (LimpaInicio){
                  contexto.clearRect(0, 0, tela.width, tela.height);
                }

                tempo = setInterval("move()", tframe);
              }

              function para() {
                clearInterval(tempo);
              }

              function move(){
                if (iter < n){

                  //caso verdadeiro só mostra o ponto voando
                  if (LimpaSempre){
                    contexto.clearRect(0, 0, tela.width, tela.height);
                  }

                  //equações de movimento
                  t = t + dt;
                  x = xo + vx * t;
                  y = yo - vy * t + 4.9 * t*t;

                  contexto.beginPath();
                  contexto.arc(x, y, r, 0, 2.0*Math.PI, true);
                  contexto.lineWidth = 2;
                  contexto.strokeStyle = 'blue';
                  contexto.fillStyle = 'yellow'
                  contexto.fill();
                  contexto.stroke();

                  iter++;
                } else{
                  clearInterval(tempo);
                }
              }

            </script>
          </head>

          <body>
            <h2>
              Animação
            </h2>
            <canvas id="minhaTela" width="700" height="200">
            </canvas>

            <form name="sorteio" action="" method="POST">
              <p>
                Ângulo de lançamento = <input id="var_a" name="var_d" type="text" size="20"/><br />
                velocidade inicial   = <input id="var_v" name="var_v" type="text" size="20"/><br />
                radio da partícula   = <input id="var_r" name="var_r" type="text" size="20"/><br />
                numero de frames     = <input id="var_n" name="var_n" type="text" size="20"/><br />
                tempo entre frames   = <input id="var_tf" name="var_tf" type="text" size="20"/><br />
              </p>

              <p>
                <input type="radio" value="0" name="tipoDeConversao" id="tp">Mostrar todos os pontos<br />
                <input type="radio" value="1" name="tipoDeConversao" id="up"> mostrar apenas 1 ponto
              </p>

              <p>
                <input type="checkbox" value="0" name="caixa1" id="compara">Compara varias trajetórias
              </p>

              <input type="button" value="inicia" onclick="inicia(this.form)" />
              <input type="button" value="para" onclick="para(this.form)" />
            </form>
          </body>
        </html>
        

Animação

Ângulo de lançamento =
velocidade inicial =
radio da partícula =
numero de frames =
tempo entre frames =

Mostrar todos os pontos
mostrar apenas 1 ponto

Compara varias trajetórias

Fenda dupla

A ideia deste programa é de Flávio dos Santos Jerez:

        <!DOCTYPE html>
        <html lang="pt-br">
          <head>
            <title>Canvas Template</title>
            <meta charset="utf-8" />

            <style type="text/css">
              canvas {
                border: 1px solid black;   /* borda   */
              }
            </style>

            <script language="javascript">

              //variáveis globaos
              var tela, contexto, r, n, l, tframe, xo, yo, iter, LimpaSempre;
              var thetaMax, a, d, lmda;

              function inicia(formulario){

                //variáveis locais
                var mensagem;

                tela     = document.getElementById('minhaTela');
                contexto = tela.getContext('2d');

                //le os dados iniciais
                lmda = parseFloat(formulario["var_lmda"].value);
                lmda = lmda * 1.0e-9;
                if (isNaN(lmda) == true){
                  lmda = 632.8e-9;
                  mensagem = "Você não digitou o comprimento de onda\nusando o valor padrão = " + lmda;
                  alert (mensagem);
                }

                d = parseFloat(formulario["var_d"].value);
                if (isNaN(d) == true){
                  d = 1.0e-3;
                  mensagem = "Você não digitou a distância entre as fendas\nusando o valor padrão = " + d;
                  alert (mensagem);
                }

                a = parseFloat(formulario["var_a"].value);
                if (isNaN(a) == true){
                  a = 1.0e-3 / 7.0;
                  mensagem = "Você não digitou a largura das fendas\nusando o valor padrão = " + a;
                  alert (mensagem);
                }

                l = parseFloat(formulario["var_l"].value);
                if (isNaN(l) == true){
                  l = tela.width/(2*0.0086);
                  mensagem = "Você não digitou a distância ao anteparo\nusando o valor padrão = " + l;
                  alert (mensagem);
                }

                n = parseFloat(formulario["var_n"].value);
                if (isNaN(n) == true){
                  n = 30;
                  mensagem = "Você não digitou o número de frame\nusando o padrão de = " + n;
                  alert (mensagem);
                }

                tframe = parseFloat(formulario["var_tf"].value);
                if (isNaN(tframe) == true){
                  tframe = 1000.0/60.0;
                  mensagem = "Você não digitou o tempo entre frame\nusando o padrão de " + tframe;
                  alert (mensagem);
                }

                //verifica checkbox
                if (formulario["todos"].checked){
                  LimpaSempre = false;
                } else{
                  LimpaSempre = true;
                }

                r  = 1.0;
                xo = tela.width / 2.0;
                yo = tela.height;
                thetaMax = xo / l;
                anima();
              }

              function anima(){
                iter = -1;
                contexto.clearRect(0, 0, tela.width, tela.height);
                tempo = setInterval("move()", tframe);
              }

              function para() {
                clearInterval(tempo);
              }

              function move(){

                var mensagem, x, yt, y, yi, yd, alphaD2, betaD2, theta;

                if (iter < n){

                  //caso verdadeiro só mostra o ponto voando
                  if (LimpaSempre){
                    contexto.clearRect(0, 0, tela.width, tela.height);
                  }

                  //equações de movimento
                  //** AQUI ONDE A MAGIA IDEADA PELO FLAVIO DEVE SER COLOCADA **
                  //devido a direitos do autor não mostramos essa formula mágica

                  contexto.beginPath();
                  contexto.arc(x, y, r, 0, 2.0*Math.PI, true);
                  contexto.lineWidth = 1;
                  contexto.strokeStyle = 'red';
                  contexto.fillStyle = 'red'
                  contexto.fill();
                  contexto.stroke();
                  iter++;
                }
                else{
                  clearInterval(tempo);
                }
              }
            </script>
          </head>

          <body>
            <h2>
              Animação, fenda dupla
            </h2>
            <canvas id="minhaTela" width="700" height="200">
            </canvas>

            <form name="fendaDupla" action="" method="POST">
              <p>
                Comprimento de onda (nm)  = <input id="var_lmda" name="var_d" type="text" size="20"/><br />
                Distância entre as fendas = <input id="var_a" name="var_d" type="text" size="20"/><br />
                Largura da fenda          = <input id="var_v" name="var_a" type="text" size="20"/><br />
                Distância fenda-anteparo  = <input id="var_v" name="var_l" type="text" size="20"/><br />
                Numero de pontos          = <input id="var_n" name="var_n" type="text" size="20"/><br />
                Tempo entre pontos        = <input id="var_tf" name="var_tf" type="text" size="20"/><br />
              </p>

              <p>
                <input type="checkbox" value="0" name="caixa1" id="todos">Mostra todos os pontos que atingem o anteparo
              </p>


              <input type="button" value="inicia" onclick="inicia(this.form)" />
              <input type="button" value="para" onclick="para(this.form)" />
            </form>
          </body>
        </html>
        

Animação, fenda dupla

Comprimento de onda (nm) =
Distância entre as fendas =
Largura da fenda =
Distância fenda-anteparo =
Numero de pontos =
Tempo entre pontos =

Mostra todos os pontos que atingem o anteparo