Entrar Ainda não tem acesso?
2
respostas

Creeper

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 Solimar De Oliveira
| 31.3k xp | 45 posts
<meta charset="utf-8">


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

<script type="text/javascript">

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



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


    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>

essa parte de canvas confesso que tive algumas dificuldade, vou rever o vídeos mais alguma vezes...aceito sugestoes do que estudar para aprofundar no canvas.

2 respostas
por Germanna De Fatima Oliveira De Lima
| 309.2k xp | 307 posts

Oi, sua dúvida é sobre como funciona o canvas, ou sobre a sintaxe usada e para o que? Vou tentar explicar, talvez e ajude.

Imagina o seguinte, seu código é um quarto. Dentro do quarto tem uma tela e um pintor.

O quarto é o HTML (

) e o pintor é o JavaScript (de nome: ). O quadro é o canvas ( ).

Se você observar, os três, da forma que escrevi, estão vazios, eles não fazem nada. Mas você quer pintar um quadro. A primeira coisa que você faz é comprar o quadro, o quadro ( ) vai ter:

<canvas largura= width="600" altura=height="400"> Aqui está vazio

tem largura, altura, mas o quadro não tem nada nele, está vazio.

Então, você irá informar ao seu pintor JavaScript () que fez a gentileza de conseguir o quadro para ele. Mas como você comunica isso? Dentro dele você escreve: var tela = document.querySelector('canvas'); o que você está falando para seu pintor: "Olha JavaS, eu comprei e dei o nome do meu quadro de tela (o quadro é seu e você dá o nome que quiser para a variável), var tela =, esse meu quadro, está dentro do quarto HTML (chamado aqui de document.) e quero que selecione o quadro (canvas) e passe a chamar ele de tela.

Espero que tenha ajudado. Qualquer coisa avisa.

por Solimar De Oliveira
| 31.3k xp | 45 posts

bom dia Germanna, sua explicação foi dez, me ajudou a clarear a mente com respeito ao canvas. Respondendo sua pergunta minha duvida foi mais na sintaxe, mas acabei vendo o video mais algumas vezes , outras referencias na internet e explicação como a sua e estou compreendendo melhor. Obrigado por compartilhar seu conhecimento, sou muito grato.