HTML5 Canvas

Ir em baixo

HTML5 Canvas

Mensagem por hugoaguiar31 em Ter Jun 28, 2011 10:14 pm

Exemplo que fizemos pra gerar um gráfico com o HTML Canvas. Repare que a tabela é escrita toda com document.write()

Código:


<html>
<head>
<title>
Teste estatistica
</title>


<script type="text/javascript">
  function drawRectangle(color, x1, y1, x2, y2) {
      var c=document.getElementById("myCanvas");
      var cxt=c.getContext("2d");
      cxt.fillStyle=color;
      cxt.fillRect(x1,y1,x2,y2);
     http://cxt.strokeRect(x1,y1,x2,y2);
  }

  // nao utilizei esta funcao mas o objetivo dela é gerar uma cor randomica como RGB
  function getRandomColor() {
      var r = Math.floor(Math.random()*256);
      var g = Math.floor(Math.random()*256);
     var b = Math.floor(Math.random()*256);
      return  "#" + r.toString(16).toUpperCase() + g.toString(16).toUpperCase() + b.toString(16).toUpperCase() ;
  }

  // Numero randomico entre A e B
  function getRandomNumber(a, b) {
      return a+Math.floor(Math.random()*(b+1-a));
  }
 
  // Simula um lancamento de dados
  function getThreeDiceNumber() {
      return getRandomNumber(1, 6) + getRandomNumber(1, 6) + getRandomNumber(1, 6);
  }
 
  // Desenha uma linha reta. O context faz um papel de "pen"
  function drawLine(x1, y1, x2, y2) {
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");      
    cxt.moveTo(x1,y1);
    cxt.lineTo(x2,y2);   
    cxt.stroke(); 
  }
  // desenha uma linha "pontilhada"
  function drawDottedLine(x1, y1, x2, y2) {
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");      
    cxt.moveTo(x1,y1);
    cxt.lineTo(x2,y2); 
    cxt.strokeStyle = "#eee";   
    cxt.stroke(); 
  }
 
  // desenha texto no canvas
  function drawText(x1, y1, texto) {
    var c=document.getElementById("myCanvas");   
    var ctx=c.getContext("2d");   
    http://ctx.font = "10pt Arial";
    //int i = ctx.fillText("Sample String", 10, 50);
    //alert(i);   
    ctx.fillStyle = "Black";
    ctx.font = "10px sans-serif";
    ctx.fillText(texto, x1, y1);   
   }
   
   function draw_labels() {
       var c=document.getElementById("myCanvas");   
        var ctx=c.getContext("2d");
       try {
          ctx.font = "bold 12px sans-serif";
          ctx.fillText("x", 248, 43);
          ctx.fillText("y", 58, 165);
       } catch(err) {document.write(err);}
       try {
        ctx.textBaseline = "top";
        ctx.fillText("( 0 , 0 )", 8, 5);
       } catch(err) {}
       try {
          ctx.textAlign = "right";
          ctx.textBaseline = "bottom";
          ctx.fillText("( 500 , 375 )", 492, 370);
       } catch(err) {}         
   }
   
 
  function criaGraficoHistograma(){
   
    var c=document.getElementById("myCanvas");
    var width = c.width;
    var height = c.height;
    var marginhor = 20;
    var marginvert = 30;
    var min = 3;
    var max = 18;
    var num_lancamentos = 6*6*6;
    var bar_width = 15;
    var valor_max = 0;
    var x=0;
    var y=0;    

    var a = new Array();;
    var i = 0; 
    var r = 0;
   
   // inicializa com zeros
   for(i=0;i<=max;i++){
       a[i] = 0;
    }
   
   // gera os lançamentos
   for(i=0;i<(num_lancamentos);i++){
       // randomico
       r = getThreeDiceNumber();
       a[r] = a[r]+1;
    } 
       
   // obtendo valor maximo para usar no dimensionamento do grafico
    for(i=min;i<=max;i++){
       if (a[i] > valor_max) {
        valor_max = a[i];
      }      
   } 
   
   // desenha os eixos
   drawLine(marginhor,height-marginvert,width-marginhor,height-marginvert); // eixo x
   drawLine(marginhor,marginvert,marginhor,height-marginvert); // eixo y
   
   for (var x = marginhor; x < width-marginhor; x += bar_width) {   
     drawDottedLine( x, marginvert, x, height-marginvert);
    
    }
   
   for (var y = marginvert; y < height-marginvert; y += bar_width) {     
     drawDottedLine(marginhor, y, width-marginhor, y);
    }
   
   
   // escala de desenho
   var escalax = ((width - (marginhor * 2))/ (max-min))*0.85; 
   var escalay = ((height - (marginvert * 2)-100)/ (valor_max)) ; 
   
   //drawRectangle( "#0877A6", 25,height-marginvert-200,10,200);

   document.write("<br/> ");
   
   document.write("<table width='400' border=1 style='font-family:Arial;' >")
   document.write("<tr> <td> Resultado </td>  <td> Número de vezes </td> </tr>")
   
   for(i=min;i<=max;i++){
      
       var x1 = Math.floor((((i-min+1)*escalax)+marginhor)-(bar_width / 2) );
      var y1 = Math.floor(((height-marginvert)-(escalay*a[i])));    
        var y2 = Math.floor(escalay*a[i]);
        var x2 = bar_width;         

      document.write("<tr>");
        document.write("<td> "+i+"</td><td>"+a[i]+"</td>");
      // document.write("<td> ( x1= "+x1+" y1= "+y1+" x2= "+x2+" y2= "+y2+") </td>");      
      document.write("</tr>");      
       drawRectangle( "#0877A6", x1,y1,x2,y2);
      //drawRectangle(getRandomColor(), x1,y1,x2,y2);
      drawText(x1+(bar_width / 4),((height-marginvert)+15),i);
      drawText(x1+(bar_width / 4),(y1-10),a[i]);
    } 
   
   document.write("</table>")
   
  }
 
 
 
 
</script>



</head>
<body bgcolor="#CFCFCF" >
<br/>
<font color="#000000" face="Arial, Helvetica, sans-serif">
Histograma lançamento de 3 dados com gráfico no HTML5 canvas
</font> <br/>

<canvas id="myCanvas" width="800" height="600">Seu browser não suporta o HTML Canvas</canvas>

 <script type="text/javascript">
 
    criaGraficoHistograma();   

  </script>




</body>

</html>


hugoaguiar31

Mensagens : 4
Data de inscrição : 19/05/2011

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: HTML5 Canvas

Mensagem por Leandrodaquer em Qua Jun 29, 2011 12:18 pm

O negócio é todo mundo postar seus projetos aqui para ajudar quem está de PF ou até para estudar mesmo. Vou postar o meu canvas e o do andré.

Canvas - Logo do Cefet - Leandro (Eu)

Spoiler:

Código:

<!DOCTYPE HTML>
<html>
<body>

<canvas id="CefetCanvas" width="600" height="380" style="border:1px;">
Seu navegador não suporta o "Canvas".

Baixe 1 desses navegadores:</br>
<a href="http://br.mozdev.org">Firefox</a>

<a href="http://www.opera.com">Opera</a>

<a href="http://www.google.com/chrome?hl=pt-BR">Chrome</a>


</canvas>

<script type="text/javascript">

var c=document.getElementById("CefetCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(50,50);//move para a longitude,latitude a partir da janela.
cxt.lineTo(70,30);//faz uma linha até a longitude,latitude a partir da janela.
cxt.lineTo(65,50);
cxt.lineTo(50,50);
cxt.moveTo(80,30);
cxt.lineTo(50,230);
cxt.lineTo(80,260);
cxt.lineTo(108,50);
cxt.lineTo(230,50); //ponta direita do cefet principal.
cxt.lineTo(210,30);
cxt.lineTo(80,30);
cxt.moveTo(110,150);
cxt.lineTo(114,120);
cxt.lineTo(210,120);
cxt.lineTo(206,150);
cxt.lineTo(110,150);
cxt.moveTo(90,260);
cxt.lineTo(95,230);
cxt.lineTo(195,230);
cxt.lineTo(90,260);
cxt.stroke();
</script>
</body>
</html>

Colorir Canvas (cores definidas e aleatórias) - André

Spoiler:

Código:

<!DOCTYPE HTML>
<html>
 <head>
  <title> Trabalho HTML5 - Comandando o Canvas </title>
  <style type="text/css">
  canvas {float:right;}
  </style>
  <script language="JavaScript" type="text/javascript">
  function desenho_a()
    {
    var c=document.getElementById("canvas_teste");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#0090EF";
    cxt.fillRect(0,0,300,300);
   }
  function desenho_b()
  {
    var c=document.getElementById("canvas_teste");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#DDDD00";
    cxt.fillRect(0,0,300,300);
  }
  function desenho_c()
  {
    var c=document.getElementById("canvas_teste");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#5F0030";
    cxt.fillRect(0,0,300,300);
  }
  function desenho_d()
  {
    var c=document.getElementById("canvas_teste");
    var cxt=c.getContext("2d");
    cxt.fillStyle=("#" + Math.round(Math.random()*100) + Math.round(Math.random()*100) + Math.round(Math.random()*100));
    cxt.fillRect(0,0,300,300);
  }
  </script>
 </head>
 <body bgcolor="#00BBEF">
  <h1> Selecione um botão para preencher o canvas </h1>
  <canvas id="canvas_teste" width="500" height="500" border="3"> </canvas>
 

  <input type="button" onclick="desenho_a()" value="Canvas Azul" />
 

  <input type="button" onclick="desenho_b()" value="Canvas Amarelo" />
 

  <input type="button" onclick="desenho_c()" value="Canvas Roxo" />
  <br / >
  <input type="button" onclick="desenho_d()" value="Canvas cor Random" />
 </body>
</html>

Eu gostaria de ter mais tempo para fazer melhor e mais coisas, mas pra uma hora ou menos até que foi bom Very Happy.


Última edição por Leandrodaquer em Qua Jun 29, 2011 1:37 pm, editado 1 vez(es)
avatar
Leandrodaquer
Admin

Mensagens : 17
Data de inscrição : 18/05/2011

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: HTML5 Canvas

Mensagem por Andre Winkler em Qua Jun 29, 2011 12:18 pm

Seu trabalho com canvas ficou excelente, Hugo

Obrigado por disponibilizar o código!

study

_________________
- Esforçar-se para a Formação do Caráter;
- Fidelidade para com o Verdadeiro Caminho da Razão;
- Criar o Espírito de Esforço;
- Respeito Acima de Tudo;
- Conter o Espírito de Agressão;

[Você precisa estar registrado e conectado para ver esta imagem.]
avatar
Andre Winkler
Admin

Mensagens : 48
Data de inscrição : 03/05/2011
Idade : 28
Localização : Penha - Rio de Janeiro

Ver perfil do usuário http://cefetweb.forumeiros.com

Voltar ao Topo Ir em baixo

Re: HTML5 Canvas

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum