Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Trocar as cores em intervalos de tempo.

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 Desenhando com o mouse com infinitas cores

por Matheus Tives
| 21.4k xp | 6 posts

Tentei usar um array pra selecionar cores variadas que trocam com o passar de X ms e pensei em mudar a posição da var cor e não consigo o resultado esperado de jeito nenhum ! Não consigo manter a cor vermelha pelo tempo especificado. Desabilitei a variável booleana que faz o trigger do mouse por que fica mais fácil de testar o código.

<canvas width="2000" height="2000"> </canvas>

<script>

var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
var posição = 0
var cor = ["blue", "red", "yellow"]
var tamanho = cor.length

function mudaposi() {
posição++ }

function circulo(log) {

    var x = log.pageX
    var y = log.pageY 
    pincel.fillStyle = cor[posição]
    pincel.beginPath();
    pincel.arc(x,y,20, 0, 2 * Math.PI);
    pincel.fill();
    setTimeout(mudaposi,1000)
    setTimeout(mudaposi, 2000)}     

    tela.onmousemove = circulo

</script>
2 respostas
solução!
por Akashi
| 220.4k xp | 284 posts

Matheus,

veja se é isto que queria fazer:

<canvas width="2000" height="2000"> </canvas>

<script>

var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
var posicao = 0;
var cor = ["blue", "red", "yellow"];


function mudaPosi() {
    posicao++;
    clearTimeout(tempo);
    setTimeout(mudaPosi, 1000);
    if(posicao >= cor.length){
        posicao = 0;
    }
}

function circulo(log) {

    var x = log.pageX;
    var y = log.pageY;
    pincel.fillStyle = cor[posicao];
    pincel.beginPath();
    pincel.arc(x, y, 20, 0, 2 * Math.PI);
    pincel.fill();
}  

    tela.onmousemove = circulo;

    var tempo = setTimeout(mudaPosi, 1000);

</script>

trabalhar com setTimeout é chatinho mesmo.

Só umas dicas:

  • evite usar cedilha e acento em nomes de variáveis e funções;
  • use sempre ponto e vírgula ao final de cada linha de instrução;

Bons estudos!

por Matheus Tives
| 21.4k xp | 6 posts

Perfeita resposta, era exatamente o que eu pretendia fazer :) Não fazia ideia da existência do clearTimeout já que cacei a documentação por FAQs hahah, mas achei muito interessante a maneira que você usou ela junto do parâmetro "tempo" pra limpar a cor anterior que era exatamente o problema que eu estava preso, obrigadão !