HTML5: Canvas grafika - Canvas szöveg

3. oldal / 4

26.3. fejezet: HTML canvas szöveg

Az előzőekben már láthattunk példát a szövegre. Ehhez elsőként szükség van létrehozott változó font paraméterére:

ctx.font = "30px Arial";

A két kötelező érték a betű mérete, illetve a betű típusa.

Utána jöhet a tulajdonképpeni szöveg:

ctx.fillText("Hello World", 10, 50);

Paraméterek: maga a szöveg, majd a helyének koordinátái.

 

Más hatást érünk el, ha a fillText helyett a strokeText-et használjuk. (Gyakorlatilag kitöltés nélküli betűket rajzol ki.) Érdemes kipróbálni!

 

A szöveghez lehet színt is hozzáadni (mint az feljebb látható), illetve igazítani is lehet. Itt a paraméterek a szokásosak. Forráskód: (htmlpelda65.html)

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="300" height="200"

style="border:1px solid #d3d3d3;">

</canvas>

<script>

var canvas = document.getElementById("myCanvas");

var ctx=canvas.getContext("2d");

ctx.font="30px Times New Roman";

ctx.fillStyle = "red";

ctx.textAlign = "center";

ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

</script>

</body>

</html>

És a létrehozott kép:

Canvas szöveg