HTML Canvas Ders_5 Textler

Canvas ile Text Çizimi

<canvas> elemanı ile text çizerken şu yapı ve metotlara dikkat etmeliyiz:

• font : Textin font yapısını belirlemek için kullanılır.
• fillText(text,x,y) : x ve y, textin başlangıç noktasını gösteren koordinatlardır. Normal bir yazı yazar.
• strokeText(text,x,y) :  x ve y, textin başlangıç noktasını gösteren koordinatlardır. İçi boş, dolgusu olmayan bir yazı yazar.

fillText() Kullanımı:

<canvas id="kanvasim" width="200" height="100"

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

Tarayıcınız HTML canvas elemanını desteklemiyor...

</canvas>

<script>

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

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

ctx.font = "30px Arial";

ctx.fillText("Selam Dünya",10,50);

</script>

Yukarıdaki kodlar ile şöyle bir canvas elemanı oluşturulur:

Tarayıcınız HTML canvas elemanını desteklemiyor...

strokeText() Kullanımı:

<canvas id="kanvasim" width="200" height="100"

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

Tarayıcınız HTML canvas elemanını desteklemiyor...

</canvas>

<script>

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

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

ctx.font = "30px Arial";

ctx.strokeText("Selam Dünya",10,50);

</script>

Yukarıdaki kodlar ile şöyle bir canvas elemanı oluşturulurrr:

Tarayıcınız HTML canvas elemanını desteklemiyor...

Text Hizalama ve Renklendirme:

Aşağıda, ortaya hizalanmış (textAlign="center";) ve kırmızı renkle yazılmış (fillStyle="red";) bir canvas örneği vardır:

<canvas id="kanvasim" width="300" height="200"
style="border:1px solid #d3d3d3;">
Tarayıcınız, HTML canvas elemanını desteklemiyor...
</canvas>

<script>
var canvas = document.getElementById("kanvasim");
var ctx=canvas.getContext("2d");
ctx.font="30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Selam Dünya", canvas.width/2, canvas.height/2);
</script>

Yukarıdaki kodlar ile şöyle bir canvas elemanı oluşturulur:

Tarayıcınız, HTML canvas elemanını desteklemiyor...

sonraki ders için tıklayınız