F�rum [D�vida] Artigo - Desenhando com o mouse na canvas da HTML5 #585091

21/08/2017

Ol�,

Estou seguindo o tutorial "Desenhando com o mouse na canvas da HTML5" mas aqui n�o est� funcionando o c�digo.

E estou com uma d�vida. Coloquei um alert("mensagem"); pra ver se o c�digo esta executando as fun��es onmousemove, onmousedown e onmouseup. O alert funcionou mas as fun��es de desenho do Canvas n�o. E s� funcionou o alert quando coloquei essas tr�s fun��es dentro das chaves do evento window.onload(). Fora desse evento nem o alert funciona.

Segue o c�digo at� agora feito mas que n�o funciona as fun��es do Canvas:

<html>

<head>

</head>

<body>
<script type="text/javascript">
   window.onload = function()
   {
    alert("mensagem");
      var largura = 1000;
	  var altura = 1000;
	  
	  var quadro = document.getElementById("quadro");
	  quadro.setAttribute("width", largura);
	  quadro.setAttribute("height", altura);
	  
	  var ctx = quadro.getContext("2d");
	  
	  var desenhando = false;
    };
    quadro.onmousemove = function(evt)
    {
		if(desenhando)
		{
		   ctx.lineTo(evt.clientX,evt.clientY);
		   ctx.stroke();
		}
   };
   quadro.onmousedown = function(evt)
   {
      ctx.moveto(evt.clientX, evt.clientY);
	  desenhando = true;
   };
   quadro.onmouseup = function()
   {
      desenhando = false;
   };
   
</script>
<canvas id="quadro"	style="background: blue" ></canvas>
</body>

</html>

Se algu�m souber o porque n�o funciona eu agrade�o.

Obrigado

Nome

Curtir t�pico

+ 1

Responder

Post mais votado

22/08/2017

Ol�,

Repare moveto << esta minusculo e o nome da fun��o � moveTo.

quadro.onmousedown = function (evt) {
                ctx.moveTo(evt.clientX, evt.clientY);
                desenhando = true;
            };

Outra coisa � window.onload = function () { ele tem que envolver todas as fun��es definidas conforme esta abaixo.

window.onload = function () {
    
    quadro.onmousedown = function (evt) {
                ctx.moveTo(evt.clientX, evt.clientY);
                desenhando = true;
            }; 
}

Acho que s� isso j� resolve da um reload na p�gina que vai funcionar.

Abra�os

Fabio Rocha

Responder

Gostei + 1

Mais Posts

22/08/2017

Nome

Obrigado pela ajuda e pela dica. Funcionou.

Mas uma coisa que notei de estranho foi que n�o adianta eu colocar um width e height muito alto porque o Canvas desenha somente na parte de cima da tela, na parte vis�vel da tela. Se o quadrado do canvas passar do tamanho da tela ele n�o desenha nesta parte que ultrapassa a parte vis�vel da tela.

Obrigado.

Responder

Gostei + 0