HTML canvas
Postado: 9 de abril de 2022
Tempo de Leitura: < 1 Minuto
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>
<p>
<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>
</p>
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: Loop Nerd
553 Visualizações
Deixe um comentário