HTML canvas

Postado: 9 de abril de 2022

HTML canvas

Canvas é um elemento HTML que pode ser usado para desenhar usando linguagem de “script” (normalmente JavaScript). Isto pode ser usado, por exemplo, para desenhar gráficos, fazer composições de fotos ou simples (e não tão simples) animações. 

Ele pode ser usado para desenhar caminhos, caixas, textos, gradientes e adicionar imagens. Por padrão, ele não contém bordas e texto. 

Os gráficos reais dentro deste contêiner são desenhados usando tags <script>.

Nota: A tag <canvas> é nova no HTML5.

Sintaxe

Em HTML, a sintaxe para a tag <canvas> é: ( exemplo desenha uma caixa chanfrada laranja usando tags <script> e a exibe dentro da tag <canvas> )

Exemplo no código Html.

<body>

  <canvas id="mycanvas" width="200" height="200"></canvas>

  <script>
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#ff9600";
    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  </script>

</body>

A tag <canvas> atua como um contêiner para os gráficos. Todos os gráficos são desenhados fora da tag <canvas> usando uma tag <script> com a API de script de tela ou a API WebGL.

Neste artigo abordamos sobre a Tag HTML canvas.

Veja outros artigos sobre Tags Html!

Tags HTML Lista Completa

Publicado por: loopnerd

196 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.

Artigos Relacionados