Zielony Smok

HTML5 canvas – tutorial

Rodzina czcionek

Domyślną czcionką w znaczniku <canvas> jest czcionka sans-serif o wielkości 10px.

Jeśli rodzina nie jest podana – napis wyświetlony jest czcionką sans-serif.

Przy określaniu czcionki można użyć nazwy konkretnej czcionki, np.

  • times
  • lucida console
  • cambria
  • courier new
  • etc.

Możemy też podać nazwę rodziny czcionek i pozostawić przeglądarce wybór odpowiedniej konkretnej czcionki, np.

  • serif – czcionka szeryfowa
  • sans-serif – czcionka bezszeryfowa
  • cursive – kursywa
  • fantasy – czcionka fantazyjna
  • monospace – czcionka równoodstępowa

Przy określaniu możemy też podać nazwę konkretnej czcionki lub czcionek oraz na końcu, po przecinku, nazwę rodziny czcionek. Wówczas przeglądarka wyświetla napisy konkretną czcionką, ale jeśli jej nie znajdzie wyświetli dostępną czcionkę z podanej rodziny, np.

  • times, serif
  • nieznana, monospace
  • nieznana nieznana, fantasy

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");
	ctx.font = "10px sans-serif";
	ctx.fillText('10px san-serif', 20, 20);
	ctx.font = "20px times";
	ctx.fillText('20px times', 20, 40);
	ctx.font = "20px lucida console";
	ctx.fillText('20px lucida console', 20, 60);
	ctx.font = "20px cambria";
	ctx.fillText('20px cambria', 20, 80);
	ctx.font = "20px courier new";
	ctx.fillText('20px courier new', 20, 100);
	ctx.font = "20px serif";
	ctx.fillText('20px serif', 20, 140);
	ctx.font = "20px sans-serif";
	ctx.fillText('20px sans-serif', 20, 160);
	ctx.font = "20px cursive";
	ctx.fillText('20px cursive', 20, 180);
	ctx.font = "20px fantasy";
	ctx.fillText('20px fantasy', 20, 200);
	ctx.font = "20px monospace";
	ctx.fillText('20px monospace', 20, 220);
	ctx.font = "20px times, serif";
	ctx.fillText('20px times, serif', 20, 260);
	ctx.font = "20px nieznana, monospace";
	ctx.fillText('20px nieznana, monospace', 20, 280);
	ctx.font = "20px nieznana nieznana, fantasy";
	ctx.fillText('20px nieznana nieznana, fantasy', 20, 300);