Olá, Minha primeira Postagem no fórum, estou feliz por ter conseguido realizar a tarefa e adicionei uma funcionalidade extra que é diminuir o Circulo, mas Gostaria que o código pudesse ser analisado, e receber indicações do que pode melhora.
Desde já agradeço. Abraços!!
insira se
<canvas width="600" height="400"></canvas>
<meta charset="UTF-8">
<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', 'black','orange'];
var indiceCorAtual = 0;
var raio = 10;
var menosRaio = -10;
function pulaLinha(){
document.write('<br><br>');
return false;
}
function mostra(frase) {
document.write(frase);
pulaLinha();
}
function desenhaCirculo(evento){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if(evento.shiftKey){
raio = raio +10;
}
if(evento.ctrlKey){
raio = raio - 10;
}
pincel.fillStyle = cores [indiceCorAtual];
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
function mudacor(){
indiceCorAtual++
if(indiceCorAtual >= cores.length){
indiceCorAtual = 0
}
return false;
}
tela.onclick = desenhaCirculo;
tela.oncontextmenu = mudacor;
pulaLinha()
mostra("Instruções:")
mostra("Click com Botão esquerdo Para Pintar um Circulo.");
mostra("Clique Com Botão direito Para Alternar as Cores.");
mostra("Segure Shift para aumentar ao tamanho do Circulo.");
mostra("Segure Ctrl para voltar circuloao tamanho anterior.");
mostra("Cores Disponiveis:");
mostra("01 = Azul");
mostra("02 = Red");
mostra("03 = Verdel");
mostra("04 = Laranja");
mostra("05 = Preto");
</script>u código aqui