Introdução ao HTML Canvas
Neste artigo, veremos um esboço no HTML Canvas. Como você já sabe, o HTML é uma linguagem de marcação. Para apresentar as informações ao visitante, você pode escrever em HTML com o texto a ser exibido no visor e como será exibido, como tamanho da fonte, cor, orientação etc. Quando se trata de adicionar elementos visuais a uma página, é necessário vincular e incorpore imagens à página, que são armazenadas separadamente do arquivo HTML em seu host.
Mas e se você precisar desenhar algo na página?
O que é o Canvas HTML?
A tela HTML (usada via tag) é um elemento HTML usado para desenhar gráficos (linhas, barras, gráficos etc.) na tela do computador do usuário em tempo real. O elemento canvas é apenas um contêiner para as informações, porém, o desenho é feito via JavaScript. É suportado por todos os navegadores modernos que suportam HTML5 e podem render JavaScript. Criar uma tela HTML é muito simples, e você pode adicioná-lo a qualquer página HTML da seguinte maneira.
Sintaxe:
Content here
Você pode definir o tamanho da tela através do atributo width e height, um ID do elemento também pode ser definido na tag, o que possibilita o uso de estilos CSS no elemento canvas. A seguir, é apresentado um exemplo de como você pode desenhar um retângulo usando o elemento Canvas:
Código:
#examplecanvas(border:2px solid green;)
Resultado:
Exemplos de desenho de tela HTML
Agora que você viu como desenhar um retângulo usando o elemento canvas, vamos dar uma olhada em outros objetos que podem ser desenhados usando o elemento na tela de saída do navegador.
1. Desenhando uma linha em uma página
moveTo (), stroke () e lineTo () são métodos que podem ser usados para desenhar linhas retas em uma página da web. Como você pode adivinhar, moveTo () informa a posição do cursor no elemento space e lineTo () é o método que informa o ponto final da linha. O traço () torna a linha visível. Aqui está o código para sua referência:
Código:
Canvas Line Example
canvas (
border: 2px solid black;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(350, 100);
context.stroke();
);
Resultado:
2. Desenhando um círculo na tela HTML
Ao contrário dos retângulos, não existe um método específico no JavaScript para desenhar um círculo. Em vez disso, podemos usar o método arc (), usado para desenhar arcos para desenhar um círculo na tela. Para obter uma tela com um círculo, use o seguinte:
Sintaxe:
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Aqui está um exemplo de uma página com um círculo:
Código:
Canvas with a circle
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(250, 150, 90, 0, 2 * Math.PI, false);
context.stroke();
);
Resultado:
3. Desenhando um texto na tela HTML
O texto também pode ser desenhado em uma tela HTML. Para inserir texto em sua tela, você pode processar o método filltext (). A seguir, é apresentado um exemplo de uma página HTML que contém texto dentro de um elemento da tela:
Código:
canvas with text inside the element
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.font = "bold 28px Arial";
context.fillText("This is text inside a canvas", 60, 100);
);
Resultado:
4. Desenhando um arco dentro de uma tela HTML
Como discutimos com um círculo, existe um método chamado arc () que é usado para desenhar arcos dentro do HTML Canvas. Aqui está a sintaxe do método em que tudo que você precisa fazer é adicionar sua variável:
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
A seguir, é apresentada uma página HTML que possui um arco dentro de um elemento da tela:
Código:
Arc inside an HTML Canvas
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(300, 300, 200, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
);
Resultado:
5. Desenho de gradiente de cor linear ou circular
Você pode usar esse método para createLienearGradient () para desenhar gradientes de sua escolha dentro do elemento da tela. Com esse método, você precisará usar addColorStop () para indicar cores de gradiente.
Sintaxe:
var gradient = context.createLinearGradient(startX, startY, endX, endY);
Aqui está uma página que tem um gradiente linear:
Código:
If you are seeing this. the browser does not support the HTML5 canvas.
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(1, "red");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 300, 150);
Resultado:
Da mesma forma, o método de desenhar gradientes circulares é createRadialGradient ().
Sintaxe:
var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);
Código:
If you are seeing this. the browser does not support the HTML5 canvas.
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createRadialGradient(80, 50, 10, 100, 50, 90);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "yellow");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 150, 80);
Resultado:
Conclusão
Agora que você está familiarizado com o que é a tela HTML e como ela pode ser usada em páginas da web, você deve se sentir mais confiante em suas habilidades de design da web. Embora as imagens possam ser usadas em alguns casos, o benefício da tela HTML é que ela é escalável e muito mais leve em termos de tamanho e poder de processamento.
Artigo recomendado
Este é um guia para o HTML Canvas. Aqui discutimos o que é HTML Canvas e seus exemplos, juntamente com a implementação e saída de código. Você também pode consultar nossos artigos sugeridos para saber mais -
- Os 16 principais atributos de estilo HTML
- HTML vs HTML5 | 9 principais comparações
- WebGL vs Canvas - principais diferenças
- As 40 principais perguntas da entrevista em HTML
- Definir uma cor de plano de fundo em HTML com exemplo