HTML5 Canvas Ders-11 Metin işlemleri
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

HTML5 Canvas Ders-11 Metin işlemleri

profil
cArleone
BEĞEN(2)
BEĞENME(0)
GÖRÜNTÜLENME(1928)
RAPOR ET
HTML5 derslerimize devam ediyoruz.Bu derste metin işlemlerini göreceğiz.Hemen kodlara geçelim.İlk önce sayfamıza tuvalimizi koyalım.

<canvas id="canvas" width="600" height="200"></canvas>


Şimdide tuvalimize erişip metnimizi yazdıralım.

<script type="text/javascript">

var canvas = document.getElementById('canvas');
var cizim = canvas.getContext('2d');

cizim.font = 'normal 20pt Times New Roman';
cizim.textAlign='center';
cizim.fillStyle='#666';
cizim.fillText('cArleone', 60,30);

</script>


Görüntüsü :
http://ustaderslik.com/resim/ders/TYG8F5GH5.png

Şimdi kodları inceleyelim.

font:"stil büyüklük font ";
//stil:normal,italic,bold
textAlign:"center";
//center,right,left
fillText("metin",x,y);


Parametreler bu kadar.
Font metnin genel özelliklerini belirliyoruz.
TextAlign ile metnin başlama yerini belirliyoruz.Center dersek belirlediğimiz koordinatın tam ortasına metnin ortası gelecektir.
FillText ile de metini belirlediğimiz koordinata basıyoruz.
FillStyle daha önce anlatmıştık.Renk verme işlevinde kullanıyoruz.Burada metin rengi veriyor.


Genel örnek :

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
#canvas{border:2px solid #ddd;}
</style>
</head>
<body>

<canvas id="canvas" width="600" height="200"></canvas>

<script type="text/javascript">

var canvas = document.getElementById('canvas');
var cizim = canvas.getContext('2d');

cizim.font = 'normal 20pt Times New Roman';
cizim.textAlign='center';
cizim.fillStyle='#666';
cizim.fillText('cArleone', 60,30);

cizim.font = 'normal 40pt Arial';
cizim.textAlign='center';
cizim.fillStyle='firebrick';
cizim.fillText('UstaDerslik',300,100);

</script>

</body>
</html>


Görüntüsü :
http://ustaderslik.com/resim/ders/ews5d5ss8.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol