Entrar Ainda não tem acesso?
1
resposta

Pessoal, não estou conseguindo fazer o triângulo. Diz que "Esta página está no modo Quirks. O layout da página pode ser afetado. Para o modo padrão, use “<!DOCTYPE html>”. Como resolver??

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 Wellington Martins
| 59.2k xp | 30 posts
Pesquisador e mestrando

Como aparece:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

O código: 

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

<script>

    var tela = document.querySelector('canvas');

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

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

    pincel.fillStyle = 'green';
    pincel.fillRect(0, 0, 200, 400);

    pincel.fillStyle = 'red';
    pincel.fillRect(400, 0, 200, 400);

    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(300, 200);
    pincel.lineTo(200, 400);
    pincel.lineTo(400, 400);
    pincel.fill();


</script>
1 resposta
por Guilherme Henrique
| 733.8k xp | 2109 posts
Instrutor

Oi Wellington

Aqui apareceu o triângulo com seu código.

Mesmo fechando a ferramenta de inspeção seu código não exibe o triângulo?

Aqui está o seu código com umas informações a mais da página para evitar esses alertas no console:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width='600' height='400'></canvas>

<script>

    var tela = document.querySelector('canvas');

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

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

    pincel.fillStyle = 'green';
    pincel.fillRect(0, 0, 200, 400);

    pincel.fillStyle = 'red';
    pincel.fillRect(400, 0, 200, 400);

    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(300, 200);
    pincel.lineTo(200, 400);
    pincel.lineTo(400, 400);
    pincel.fill();


</script>
</body>
</html>