Neste artigo, aprenderemos uma tag HTML5 usada para construir gráficos gráficos que é a tag Canvas .

Por exemplo, se você deseja desenhar um diagrama geométrico, devemos usar um arquivo de imagem. Mas com o Canvas, você pode se desenhar completamente.

1. O que é HTML5 Canvas?

Canvas é uma tag HTML5 semelhante a outras tags HTML, mas a diferença mais óbvia é que o conteúdo do Canvas é construído a partir de Javascript. Para usar o Canvas, você deve colocar a tag <canvas></canvas> na posição que deseja exibir, depois usar as APIs que o HTML5 fornece para manipular os objetos dentro do Canvas (linha, círculo, . ..).

Ao usar o Canvas, você deve entender a diferença entre os elementos do Canvas e seu conteúdo. O elemento Canvas é apenas uma tag HTML comum, mas seu conteúdo é uma coleção de objetos que compõem um Graphic.

Quando exibido no navegador, o Canvas será exibido como uma imagem png .

 <canvas id="myCanvas" width="578" height="200"></canvas> <script> // Lấy thẻ HTML Canvas var canvas = document.getElementById('myCanvas'); // Vẽ ở mô hình 2D var context = canvas.getContext('2d'); // Thiết lập font chữ và màu context.font = '40pt Calibri'; context.fillStyle = 'blue'; // vẽ một đoạn text tại vị trí 150px 100px context.fillText('Hello World!', 150, 100); </script>

Corra para cima você verá um texto " Olá Mundo! ", tente escurecer, ok? Absolutamente não porque é um objeto exibido como uma imagem, então você só pode salvá-lo como um arquivo png , não mais um texto.

2. Conclusão

Como este é o primeiro artigo a iniciar uma série de aprendizado sobre as tags Canvas em HTML5, não entrarei em como lidar com isso, mas apenas apresentarei o conceito do que é o Canvas e algumas notas ao usar o Canvas. Nos próximos artigos aprenderemos como usar a API HTML5 Canvas para manipular objetos no Canvas.