2
respostas

escrevendo dentro do canvas

como posso fazer para colocar um texto dentro do canvas?

2 respostas

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.)