Entrar Ainda não tem acesso?
1
resposta

ajuda com as dimensões e coordenadas

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Desenhando gráficos com Canvas e atividade A cara do Creeper

por Adriano Andrade Ramos
| 44.5k xp | 70 posts

Oi gente, ainda fico perdido na hora de aplicar as dimensões e coordenadas. Além desse exemplo abaixo alguém pode me ajudar explicando novamente com outros exemplos como isso deve ser aplicado? 

<canvas width="600" height="400"></canvas>  

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'darkgreen';
    pincel.fillRect(200, 50, 350, 300); // Coordenadas 200(x),50(y) largura 350 e altura 300 pixels //

    pincel.fillStyle = 'black';
    pincel.fillRect(250,110,90,90);
    pincel.fillRect(410, 110, 90,90);

    pincel.fillRect(340,200,70,100);

    pincel.fillRect(300, 240, 40,110);
    pincel.fillRect(410,240, 40, 110);

</script>
1 resposta
por Ricardo Bruno Marques Alves
| 35.6k xp | 11 posts

Tive dificuldade em achar as coordenadas , não que se já difícil, mas olhando para a tela sem marcação, acaba ficando na tentativa e erro a menos que vc tenha um desenho no papel milímetro. O meu saiu assim:

<canvas width="600" height="400"> </canvas>
<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle ='lightgray';
    pincel.fillRect(0, 0 , 600, 400 );

    pincel.fillStyle ='darkgreen'
    pincel.fillRect(150, 50 , 350, 300 );

    pincel.fillStyle ='black'
    pincel.fillRect(200, 90 , 90, 90 );

    pincel.fillStyle ='black'
    pincel.fillRect(360, 90 , 90, 90 );

    pincel.fillStyle ='black'
    pincel.fillRect(290, 180 , 70, 100 );

    pincel.fillStyle ='black'
    pincel.fillRect(250, 240 , 40, 110 );

    pincel.fillStyle ='black'
    pincel.fillRect(360, 240 , 40, 110 );


</script>