Egenskapen font

Egenskapen font ställer in inställningarna för teckensnitt när det ritas på canvas med hjälp av metoden fillText eller metoden strokeText. Metoden accepterar samma parametrar som CSS-egenskapen font.

Syntax

javascriptkontext.font = teckensnittsinställningar;

Exempel

Låt oss rita text på canvas med hjälp av fillText och ge den en storlek på 30px och typsnittet Arial med hjälp av font:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.font = '30px Arial';
ctx.fillText('Hello world', 30, 50);

Результат:

Se även

  • egenskapen textAlign,
    som justerar texten horisontellt
  • egenskapen textBaseline,
    som justerar texten vertikalt