Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Exercício Desenhe Obras de Arte

Não ficou igual ao do instrutor mas fiquei feliz por finalmente ter conseguido atingir o objetivo por conta própria =)

<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
    function desenhaQuadrado(x,y,tamanho,cor){
        pincel.fillStyle=cor;
        pincel.fillRect(x,y,tamanho,tamanho)
        pincel.fill();
    }
    function desenhaCirculo(x,y,raio,cor){
        pincel.fillStyle=cor;
        pincel.beginPath();
        pincel.arc(x,y,raio,0,2*3.14);
        pincel.fill();
    }
    function desenhaPaletaDeCores(){
        desenhaQuadrado(xVermelho,yQuadrados,tamanhoQuadrados, 'red');
        desenhaQuadrado(xVerde,yQuadrados,tamanhoQuadrados,'green');
        desenhaQuadrado(xAzul,yQuadrados,tamanhoQuadrados,'blue');
    }
    function lidaComMovimentosDoMouse(evento){
        var x=evento.pageX-tela.offsetLeft;
        var y=evento.pageY-tela.offsetTop;
        if(x>0&&x<150&&y>0&&y<50){
            desenha=false;
        }
        if(desenha){
        desenhaCirculo(x,y,5,corAtual);
        }    
    }
    function habilitaDesenhar(){
        desenha=true;
    }
    function desabilitaDesenhar(){
        desenha=false;
    }
    function mudaCor(evento){
        var x=evento.pageX-tela.offsetLeft;
        var y=evento.pageY-tela.offsetTop;
        if(x>0&&x<50&&y>0&&y<50){
            corAtual='red';
        }
        if(x>50&&x<100&&y>0&&y<50){
            corAtual='green';
        }
        if(x>100&&x<150&&y>0&&y<50){
            corAtual='blue';
        }
    }
    var tela=document.querySelector('canvas');
    var pincel=tela.getContext('2d');
    pincel.fillStyle='lightgray';
    pincel.fillRect(0,0,600,400);
    var desenha=false;
    var corAtual='blue';
    var xVermelho=0;
    var xVerde=50;
    var xAzul=100;
    var yQuadrados=0;
    var tamanhoQuadrados=50;
    desenhaPaletaDeCores();
    tela.onmousemove=lidaComMovimentosDoMouse;
    tela.onmousedown=habilitaDesenhar;
    tela.onmouseup=desabilitaDesenhar;
    tela.onclick=mudaCor;
</script>
2 respostas
solução!

Ficou muito bacana sua resolução Jorge!!! Gostei bastante!!

Obrigado Matheus!