Mais um artigo sobre Canvas e Texto. O caso de hoje é bem interessante: Digamos que eu esteja criando um botão para usar no Canvas, e na aparência do botão, quero que tenha um rótulo. Mas eu quero que o botão se adapte ao tamanho do texto que vou inserir. Como faço isso? Para nossa alegria, o contexto possui um método para fazer essa medida, o método measureText.
Sempre que for usar esse método, faça depois de configurar a fonte, conforme o código embaixo:
ctx.font = "30px Arial";
var tam = ctx.measureText("Olááá Enfermeiraaa");
ctx.strokeRect(10, 10, tam.width, 30);
Esse código cria um retângulo que é capaz de envolver o texto que eu quero. O método measureText retorna um objeto que possui a largura (atributo width) do texto. Sim, somente a largura, pois a altura do texto é definida pela fonte, que neste caso é 30.
Então pessoal, espero que esse tutorial rápido possa ser útil.
Nenhum comentário:
Postar um comentário