<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
var cores = ["green","black","orange","blue","yellow","red"];
var corAtual = 0;
function desenhaCirculo1(x, y, raio) {
pincel.fillStyle = cores[corAtual];
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function desenhaCirculo2(x, y, raio){
pincel.fillStyle = cores[corAtual];//especifica a cor ou o estilo para usar regiões internas.
pincel.beginPath();//inicia um novo caminho (path), esvaziando a lista de sub-caminhos (sub-paths).
pincel.arc(x, 30, 30, 0, 2 * Math.PI);//diciona um arco circular para o atual sub-caminhoa (sub-path).
pincel.fill();//preenche um dado path ou o path atual com o estilo atual de preenchimento.
}
function limpaTela1() {
pincel.clearRect(0 , 70, 600, 330);
}
function mudaCor() {
corAtual++;
if (corAtual >= cores.length) {
corAtual=0;
}
}
var raio = 4;
var fatorCrescimento = 0;
function atualizaTela1() {
limpaTela1();
if( raio > 60) {
fatorCrescimento = -1;
} else if (raio < 5) {
mudaCor();
fatorCrescimento = 1;
}
desenhaCirculo1(300, 220, raio);
raio = raio + fatorCrescimento;
}
function limpaTela2() {
pincel.clearRect(0, 0, 600, 70);
}
var x = 10;
var direção = 1;
function atualizaTela2() {
limpaTela2();
if( x > 600) {
direção = -1;
} else if (x < 0) {
direção = 1;
}
x = x + direção;
desenhaCirculo2(x, 20, 10);
}
setInterval(atualizaTela1, 15);//mostra na tela o circulo que pulsa;
setInterval(atualizaTela2, 10)//mostra na tela o circulo que vai e vem.
</script>
