Text na plátně HTML
Kreslení textu na plátno
Pro kreslení textu na plátno jsou nejdůležitější vlastnosti a metody:
- font - definuje vlastnosti písma pro text
- fillText( text,x,y ) - vykreslí "vyplněný" text na plátno
- strokeText( text,x,y ) - nakreslí text na plátno (bez výplně)
Použití fillText()
Příklad
Nastavte písmo na 30px "Arial" a napište vyplněný text na plátno:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Použití strokeText()
Příklad
Nastavte písmo na 30px "Arial" a napište text bez výplně na plátno:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Přidat barvu a vycentrovat text
Příklad
Nastavte písmo na 30 pixelů „Comic Sans MS“ a do středu plátna napište vyplněný červený text:
JavaScript:
var
canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);