logo

Jak upravím text na plátně HTML5 tak, aby byl tučný a/nebo kurzíva?

Tisknu text na plátno docela přímočarým způsobem:

var ctx = canvas.getContext('2d');
ctx.font = "10pt Courier";
ctx.fillText("Hello World", 100, 100);

Ale jak mohu změnit text na tučné písmo, kurzívu nebo obojí? Nějaké návrhy na opravu tohoto jednoduchého příkladu?

Odpověď

Z dokumentace MDN na CanvasRenderingContext2D.font :

CanvasRenderingContext2D.font vlastnost Canvas 2D API určuje aktuální styl textu, který se má použít při kreslení textu. Tento řetězec používá stejnou syntaxi jako specifikátor písem CSS.

To znamená, že bude fungovat cokoli z následujícího:

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

ctx.font = "italic bold 10pt Courier";

Zde je několik dalších zdrojů pro více informací:

  • Ponořte se do HTML5
  • Plátno HTML5 – základy