Pessoal, exercicio executado com sucesso.
comentem meu cod, por favor!
<canvas width="600" height="400">Quadro de Bolinhas</canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
//Variáveis
var Cor = ['blue', 'red', 'yellow', 'green'];
var Index = 0;
var CorPTBR = ['Azul', 'Vermelha', 'Amarela', 'Verde']
var Raio = 10;
//Funções
function desenhaCirculo(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if(desenha){
pincel.fillStyle = Cor[Index];
pincel.beginPath();
if(evento.shiftKey){
Raio = Raio+10;
}
if(evento.ctrlKey && Raio>11){
Raio = Raio-10;
}
pincel.arc(x, y, Raio, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
}
function trocarCor(direito){
Index++;
if(Index >= Cor.length){
Index = 0;
}
alert('Sua nova cor é '+CorPTBR[Index]);
return false;
}
function riscandoTela(click){
var x = click.pageX - tela.offsetLeft;
var y = click.pageY - tela.offsetTop;
pincel.fillStyle = Cor[Index];
pincel.beginPath();
pincel.lineTo(x, y);
pincel.fill();
}
function escolherCor(){
var corRecebida = parseInt(prompt("Escolha sua cor:\n0: Azul\n1: Vermelho\n2: Amarelo\n3: Verde"));
console.log(corRecebida)
if(corRecebida<Cor.length){
Index = corRecebida;
console.log('escolha');
}else{
alert('Você não escolheu uma opção valida\n A cor Padrão é Azul');
}
}
tela.oncontextmenu = trocarCor;
tela.onmousemove = desenhaCirculo;
escolherCor();
// ligando e desligando a função de farma anônima
tela.onmousedown = function() {
desenha = true;
}
tela.onmouseup = function() {
desenha = false;
}
</script>