Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Função para Desenhar o circulo. Não aparece.

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Interagindo com o usuário e atividade Mouse, diga-me em que posição estás

por Luis Henrique Oliveira Freitas
| 36k xp | 4 posts

Não estou conseguindo usar uma função para desenhar o circulo. Alguém poderia me ajudar?

var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');

pincel.fillStyle = 'grey';
pincel.fillRect(0,0,800,500);

function desenhaCirculo(x1, y1, raio, cor) {

    pincel.fillStyle = cor;
    pincel.beginPath();
    pincel.arc(x1, y1, raio, 0, 2*3.14);
    pincel.fill();
}
function exibeCirculo(event){

    var x = event.pageX - tela.offsetLeft;
    var y = event.pageY - tela.offsetTop;
    desenhacirculo(x,y,10,'blue');
    /*pincel.fillStyle="blue";
    pincel.beginPath();
    pincel.arc(x, y, 10, 0, 2*3.14);
    pincel.fill();
    console.log(x + ','+ y);*/        
}
tela.onclick = exibeCirculo;
3 respostas
solução!
por Akashi
| 220.4k xp | 284 posts

O "C" de Circulo no nome da 'function' deve ser maiúsculo, para ficar igual ao 'function' desenhaCirculo, De resto está tudo OK.

    desenhaCirculo(x,y,10,'blue');

E faltou o cabeçalho e o fim do seu código, mas acho que você só não os colou aqui. Se não, tem que colocar também:

<meta charset="UTF-8">

<canvas width="600" height="400"></canvas>

<script>

//~~~~ miolo do código omitido

</script>
por Luis Henrique Oliveira Freitas
| 36k xp | 4 posts

Muito obrigado. Nem tinha percebido kkkkk

por Akashi
| 220.4k xp | 284 posts

Quando seu código não fizer o esperado, acostume-se a abrir o console (ctrl + shift + i) ou tecla F12 para ter ao menos ter uma noção de qual problema está ocorrendo. Mas note quem nem sempre a linha indicada é a linha onde está o problema. No seu código, o erro no console foi o seguinte:

Uncaught ReferenceError: desenhacirculo is not defined teste_de_exercicios.html:24

Aí voltei pro código pra olhar a linha e o desenhacirculo, e comparei com o outro desenhaCirculo, e vi que estavam diferentes. Mas sem a ajuda do console fica difícil mesmo.