HTML5 Canvas Ders-8 Arkaplan Rengi (fillStyle-fill)
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-8 Arkaplan Rengi (fillStyle-fill)

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1847)
RAPOR ET
HTML5 serimize devam ediyoruz.Bu derste yaptığımız çizimlere arkaplan rengi vermeyi göreceğiz.Arka plan rengi seçmeyi fillStyle ve boyamayı fill() ile yapıyoruz.Kodlara geçelim.

Öncelikle canvas yani tuvalimizi yaratalım.

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


Şimdi de bir şekil çizip boyayalım.


<script type="text/javascript">

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

cizim.beginPath();
cizim.arc(325,100, 50,0,7,false);
cizim.fillStyle = '#f1f1f1';
cizim.fill();

</script>


Arc ile bir daire çizdik.Daha sonra fillStyle ile renk seçtik ve fill() diyerek burayı boya dedik.En baştaki 2 kodda standart erişim kodlarımız.

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

Genel örnek :


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>cArleone</title>
<style type="text/css">
#canvas{border:2px solid #333;}
</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.beginPath();
cizim.rect(100, 50, 100, 50);
cizim.fillStyle = '#ddd';
cizim.fill();

cizim.beginPath();
cizim.arc(325,100, 50,0,7,false);
cizim.fillStyle = '#f1f1f1';
cizim.fill();

cizim.beginPath();
cizim.rect(450, 50, 100, 50);
cizim.fillStyle = '#999';
cizim.fill();

</script>

</body>
</html>



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

Html5 de boyama işlemi bu şekilde.



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