<meta charset="UTF">
<canvas width="600" height="400"></canvas>
<script>
var canvas = document.querySelector("canvas");
var brush = canvas.getContext("2d");
var color = ["red", "yellow", "green"];
var countColor = 0;
function drawCircle(x, y, raio) {
brush.fillStyle = color[countColor];
brush.beginPath();
brush.arc(x, y, raio, 0, 2*Math.PI);
brush.strokeStyle = "navy";
brush.stroke();
brush.lineWidth = 4;
brush.fill();
countColor++;
if(countColor > color.length) {
countColor = 0;
}
}
function clearCanvas() {
brush.clearRect(0, 0, 600, 400);
}
var x = 40;
var y = 25;
var raio = 9;
var increaseRaio = 0;
var path = 1;
var pathY = 10;
function updateCanvas() {
clearCanvas();
brush.fillStyle = "lightgreen"
brush.fillRect(0,0,600,400);
if(raio > 30){
increaseRaio = -1;
} else if(raio < 10){
increaseRaio = 1;
}
if(x > 600) {
path = - 1;
} else if (x < 0) {
path = 1;
} else if (y > 380) {
pathY = -10;
} else if(y < 0) {
pathY = 10;
}
drawCircle(x, y, raio);
raio = raio + increaseRaio;
x = x + path;
y = y + pathY;
}
setInterval(updateCanvas, 100);
</script>
