como posso fazer para colocar um texto dentro do canvas?
como posso fazer para colocar um texto dentro do canvas?
Olá, Giovanna, uma das maneiras de se inserir um texto no canvas é criar uma função para isso, como neste exemplo:
<canvas width="600" height="400"></canvas>
<script>
function desenhaTexto(x , y, texto) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.font='18px Georgia';
pincel.fillStyle='black';
pincel.fillText(texto, x, y);
}
desenhaTexto(20, 20, "Assim se insere um texto no canvas.");
</script>
Sendo que em:
pincel.font: você define o tamanho e tipo da fonte.
pincel.fillStyle: define a cor do texto.
pincel.fillText: define as coordenadas x e y a partir das quais o texto será inserido, além do texto propriamente dito.
Como pudemos notar, criar uma função facilita no momento de pedirmos para o sistema mostrar o texto, pois aí basta "chamar" a função e indicar a posição e o texto que queremos exibir desenhaTexto(20, 20, "Assim se insere um texo no canvas."); sem ter que reescrever o código completo e definir os outros parâmetros (cor, tamanho e tipo de fonte) cada vez que for necessário.
Este assunto será abordado no curso "Lógica de programação II" que você está fazendo (Unidade 02 - Extraindo funções, item 10 - Gráfico de barras), mas é bem legal que você tenha tido a curiosidade antes.
Espero ter contribuído. Bons estudos!
(Esta resposta era igual à anterior... saiu por engano.)