<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
var cores = ["blue", "red", "green", "orange", "black"];
var cor = 0;
var r = 10;
function desenhaCirculo(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if(evento.shiftKey == true && r <= 40) {
r = r + 10;
}
if(evento.altKey == true && r > 10) {
r = r - 5;
}
pincel.fillStyle = cores[cor];
pincel.beginPath();
pincel.arc(x, y, r, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
tela.onclick = desenhaCirculo;
function mudarCor() {
cor++;
if(cor >= cores.length) {
cor = 0;
}
return false;
}
tela.oncontextmenu = mudarCor;
</script>
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta
resposta
[Dúvida] Fiz dessa forma esta correto?
solução!
Oi Phelipe, tudo bem?
Obrigado pela paciência em aguardar uma resposta!
Seu código apresenta clareza, coerência e boa indentação. Parabéns pelo uso da lógica na escrita das condições if que fazem parte da função desenhaCirculo.
Sugiro uma pequena alteração na forma de escrever os comandos dentro das condições aplicadas à função:
if(evento.shiftKey == true && r <= 40) {
r +=10;
}
if(evento.altKey == true && r > 10) {
r -=5;
}Gostaria também de te parabenizar pela adição dos comandos responsáveis pela mudança de cor, contudo nas próximas aulas o instrutor ensinará como utilizar uma gama maior de cores.
Continue se dedicando aos estudos e caso haja dúvidas, estarei a disposição para te ajudar.
Grande abraço e bons estudos!