Contém: Alternância de percurso (indo e vindo) + Alternância de tamanho + Alternância de cores com SHIFT
Solucionado
Contém: Alternância de percurso (indo e vindo) + Alternância de tamanho + Alternância de cores com SHIFT
<title>Desenhando Circulos Coloridos</title>
<h4>Mudança de cor com SHIFT + Alternância de percurso e tamanho;</h4>
<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillStyle = "white";
pincel.fillRect(0,0, 600, 400);
var cores = ['pink', 'magenta', 'maroon']
var indiceCorAtual = 0;
function mudaCor() {
indiceCorAtual++;
if(indiceCorAtual >= cores.length) {
indiceCorAtual = 0;
}
return false;
}
tela.oncontextmenu = mudaCor;
function exibeCirculos(x, y, raio) {
pincel.fillStyle = cores[indiceCorAtual];
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * 3.14);
pincel.fill();
}
function limpaTela(){
pincel.clearRect(0, 0, 600, 400);
}
var contX = 20;
var movimentoCirculo = 1;
var raioPulsante = 19;
var tamanhoRaio = 0;
function atualizaTela(){
limpaTela();
if (contX > 600) {
movimentoCirculo = -1;
} else if (contX < 0){
movimentoCirculo = 1;
}
if (raioPulsante>30) {
tamanhoRaio--;
} else if (raioPulsante<20) {
tamanhoRaio = 1
}
exibeCirculos(contX, 50, raioPulsante);
contX += movimentoCirculo;
raioPulsante += tamanhoRaio;
}
setInterval(atualizaTela, 20);
</script>