Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

sakuya

Como criar botão dentro da tag <canvas></canvas>

Por , em Javascript

Recommended Posts

sakuya    0

sakuya
Postado

Ola, eu ja consigo colar imagens e alteralas por tempo mas não estou conceguindo criar botões, os tutorias e exemplos que achei disto erao muito complicados.

 

Agradeço se alguem poder passar um tutorial, exemplo ou me explica como se faz ele.

Compartilhar este post

Link para o post
Compartilhar em outros sites

sakuya    0

sakuya
Postado

Não sei qual deles, achava que só tinha um tipo de botão.

Para o que eu quero, preciso de um botão que fique invisivel.

 

Vo explica oque estou tentando fazer assim acho que vai ser mais facil.

 

Estou colocando uma imagem que vai ser o fundo e encima dela tem otras que serião os botões, quando clica no botão ele vai mudar de cor e vai fazer alguma coisa.

 

Eu sei fazer a parte dele mudar de cor e as outras ações mas não sei como fazer pra saber quando ouve um click, ja me falarão que eu deveria usar o flash pra fazer este tipo de coisa, mas andei lendo que o canvas é mais rapido e os naveadores novos podem reconhecer sem precisar instalar nada, sem contar que ele faz parte da padronização da web

 

Bem obrigada.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Para detectar um click, você pode usar JavaScript, o tratador de evento onclick. ;)

 

canvas é uma nova tag de HTML 5, então os antigos nem vão reconhecer. Que eu conheça, só o Mozilla Firefox, Opera e browsers com Webkit o reconhecem.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

T.Colucci    33

T.Colucci
Postado

Na realidade, é isso mesmo que nosso amigo Thiago (opa, meu xará! :)) disse.

 

 

Vou fazer o código inline, mas o ideal é que você use o javascript não-obstrutivo:

 


<button onclick="nome_da_sua_funcao();">Bla</button>

Ok? Qualquer duvida, volte a postar!

Compartilhar este post

Link para o post
Compartilhar em outros sites

sakuya    0

sakuya
Postado

o botão funciono dentro da pagina normal mas quando tento coloca dentro do canvas ele não aparece tem que fazer alguma coisa a mais?

 

eu concgui fazer oque queria usando uma biblioteca que eu pego as coordenadas do local do click dai comparo com as coordenadas dos botões pra saber se foi encima de algum deles, mas achei meio estranho este metodo.

 

queria ve se achava alguma forma mais facil, pois com este metodo que achei é bem dificl de fazer botões que não sejão quadrados ou retangulos

Compartilhar este post

Link para o post
Compartilhar em outros sites

sakuya    0

sakuya
Postado

tentei usa o botão com este exemplo do canvas, tenho certeza que esta errado pois não achei como coloca as coordenadas pra ele

 

<html>
 <head>
  <script type="application/x-javascript">
	function draw(ctx) {
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d"); 

      ctx.fillStyle = "rgb(200,0,0)";
      ctx.fillRect (10, 10, 55, 50);

      ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
      ctx.fillRect (30, 30, 55, 50);
 
      <button onclick="verde(ctx);">Teste</button>
    }
	
    function verde(ctx){
      ctx.fillStyle = "rgba(0, 200, 0, 0.5)";
      ctx.fillRect (30, 10, 55, 50);
    }
  </script>
 </head>
 <body onload="draw()">
   <canvas id="canvas" width="300" height="300"></canvas>
 </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

É não está funcionando mesmo. =/

 

Vou mover para JavaScript, onde terá mais suporte. Se eu achar algo, respondo.

 

Tópico movido:

 

Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif JavaScript / DHTML

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito