Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Não apresenta o 3º canva

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 vida não é só feita de retângulos!

por MAYRO LANEL
| 414.2k xp | 18 posts

Senhores preciso de uma ajuda, seguindo a orientação do curso criei os 3 canvas com o javascript mas não é apresentado conforme a estrutura vista no vídeo exibindo apenas o 1º e 2ª. A ferramenta que estou utilizando é o sublime text 3. 

<!-- Quando utilizo esses valores funciona.
                    pincel.fillStyle = "#3f51b5";
                    pincel.fillRect(0, 0, 600, 400);

                    pincel.fillStyle = "#1a237e";
                    pincel.fillRect(0, 0, 100, 400);


                    pincel.fillStyle = "#303f9f";
                    pincel.fillRect(200, 0, 200, 400);
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Curso de Lógica II</title>
        <meta charset="utf-8">
        <style type="text/css">
            canvas{
                width: 600px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <canvas></canvas>

        <script type="text/javascript">

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

            pincel.fillStyle = "#3f51b5";
            pincel.fillRect(0, 0, 600, 400);
            /* Ao utilizar os valores passados pelo instrutor não funciona. */
            pincel.fillStyle = "#1a237e";
            pincel.fillRect(0, 0, 200, 400);

            /*Esse item não  é apresentado*/
            pincel.fillStyle = "#303f9f";
            pincel.fillRect(400, 0, 200, 400);


        </script>
    </body>
</html>
5 respostas
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Oi Mayro!

Se você esta falando do exercício "A vida não é só feita de retângulos!" seu código não segue a orientação data pelo exercício. Você não usou beginPath nem lineTo no seu código.

Será que você postou a dúvida para o exercício correto? Estou na dúvida de qual exercício você esta se referindo, porque o código que você postou não confere com o exercício do post que você quer tirar dúvida.

Se por algo feito no vídeo, me passa o link do vídeo e me diz o minuto que apresenta o código.

Fica tranquilo que isso se resolve :)

Aguardo seu retorno.

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Oi Mayro! Aguardo seu retorno.

solução!
por IGOR DE
| 69.4k xp | 1 posts

Mayro, Boa noite.

No caso do seu código, o que ocorre é que a unidade de medida utilizada dentro da TAG <style> que se encontra encapsulada na TAG <head> não corresponde a unidade de medida utilizada na função "fillrect()".

Faça um teste conforme o trecho do código abaixo, inserindo as medidas diretamente dentro da TAG <canvas></canvas>que você verá o código funcionar corretamente.

<!DOCTYPE html>
<html>
    <head>
        <title>Curso de Lógica II</title>
        <meta charset="utf-8">
        <style type="text/css">
           /* canvas{
                width: 600px;
                height: 400px;
                */
            }
        </style>
    </head>
    <body>
        <canvas width="600" height="400"></canvas>

        <script type="text/javascript">

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

            pincel.fillStyle = "#3f51b5";
            pincel.fillRect(0, 0, 600, 400);

            pincel.fillStyle = "#1a237e";
            pincel.fillRect(0, 0, 200, 400);


            pincel.fillStyle = "#303f9f";
            pincel.fillRect(400, 0, 200, 400);


        </script>
    </body>
</html>
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Aliás , em nenhum momento eu declaro assim. Nem uso head nem body para o aluno não se enrolar.

Bem observado Igor!

por MAYRO LANEL
| 414.2k xp | 18 posts

Senhores boa noite,

De fato meu problema foi a unidade de medida utilizado ao retira-la funcionou corretamente. Muito obrigado pela ajuda. Tenho alguns vícios, sempre prefiro colocar a estrutura mínima do HTML rsrsrs. Mais uma vez obrigada pela ajuda e pronto atendimento