[Dúvida] Artigo - Desenhando com o mouse na canvas da HTML5
21/08/2017
0
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:
Se alguém souber o porque não funciona eu agradeço.
Obrigado
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.
Outra coisa é window.onload = function () { ele tem que envolver todas as funções definidas conforme esta abaixo.
Acho que só isso já resolve da um reload na página que vai funcionar.
Abraços
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
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.
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
Clique aqui para fazer login e interagir na Comunidade :)
