Yazılım Günlüğü: Temmuz 2016

27 Temmuz 2016 Çarşamba

Phpde global ve local işlemler(değişkenler)

//global ve local işlemler(değişkenler)
//fonksiyon dışındaki değişkenlere global değişken,fonksiyon içindeki değişkenlere local değişken denir.
<?php
echo '<p align="center"><a href="index.php?Git=isimler">isimler</a>
<a href="index.php?Git=ulkeler">Ülkeler</a></p>';

function isimler(){

echo "Ramazan<br>";
echo "Mesut<br>";
echo "leopar<br>";
echo "pretiş<br>";

}

function ulkeler(){

echo "Türkiye<br>";
echo "Almanya<br>";
echo "Hollanda<br>";
echo "Belçika<br>";

}
$Git=$_GET["Git"];

switch ($Git){
default: //$Git boş ise isimler() fonksiyonunu çağır.
isimler();
break;
case "ulkeler"; //$Git ülkeler ise ulkeler() fonksiyonunu çağır
ulkeler();
break;
}

?>
-----------------------
//global ve local işlemler(değişkenler)
//fonksiyon dışındaki değişkenlere global değişken,fonksiyon içindeki değişkenlere local değişken denir.
<?php
$menu= '<p align="center"><a href="index.php?Git=isimler">isimler</a>
<a href="index.php?Git=ulkeler">Ülkeler</a></p>';

$telif_hakki= 'tüm hakları sakladır';

function isimler(){
global $menu,$telif_hakki;//global değişkeni çağır .
echo $menu;
$siraisimler=array("Ramazan<br>","Mesut<br>","leopar<br>","pretiş<br>");
foreach ($siraisimler as $yaz) {
echo $yaz;

}
echo "<br>$telif_hakki";
}

function ulkeler(){
global $menu,$telif_hakki;//global değişkeni çağır .
echo $menu;
$siraulkeler=array( "Türkiye<br>","Almanya<br>","Hollanda<br>","Belçika<br>");
foreach ($siraulkeler as $yaz) {
echo $yaz;

}
echo "<br>$telif_hakki";
}
$Git=$_GET["Git"];

switch ($Git){
default: //$Git boş ise isimler() fonksiyonunu çağır.
isimler();
break;
case "ulkeler"; //$Git ülkeler ise ulkeler() fonksiyonunu çağır
ulkeler();
break;
}

?>

----------------------

Php dizi değişken operatörleri

//dizi değişken operatörleri
<?php

$m=array("ilkbahar","yaz","sonbahar","kış");
$m1=array("yaz","sonbahar","kış","ilkbahar","yenibahar");

$mevsimler=$m +$m1 ;
//print_r($mevsimler);

foreach ($mevsimler as $dondur) {
echo $dondur."<br>";
}

?>
----------
//dizi değişken operatörleri
<?php

$m=array("ilkbahar","yaz");
$m1=array("ilkbahar","yaz");

/*
$mevsimler=$m +$m1 ;
//print_r($mevsimler);

foreach ($mevsimler as $dondur) {
echo $dondur."<br>";
}
*/

if($m==$m1){
echo "dizi değişkenin değerleri bir birine eşit";

}else{
echo "değişkenler eşit değil";

}

?>
--------------------------
//dizi değişken operatörleri
<?php

$m=array("1" => "ilkbahar","2" =>"yaz");
$m1=array("2" =>"yaz","1" =>"ilkbahar");

/*
$mevsimler=$m +$m1 ;
//print_r($mevsimler);

foreach ($mevsimler as $dondur) {
echo $dondur."<br>";
}
*/

if($m==$m1){
echo "dizi değişkenin değerleri bir birine eşit<br>";

}else{
echo "değişkenler eşit değil<br>";

}
if($m===$m1){
echo "dizi değişkenin değerleri bir birine denk";

}else{
echo "değişkenler denk değil<br>";

}
?>

PHP ARTİRMA EKSİLTME VE HATA KONTROL OPERATÖRLERİ

//artirma eksiltme ve hata kontrol operatörleri
<?php
$Git=$_GET["Git"];

if($Git==""){
echo '<form action="index.php?Git=1" method="post">
Bir şehir girin <input type="text" name="sehir"/>
<input type="submit" value="gönder"/>
</form>';

}else{
$sayi=1;
$sehir=$_POST["sehir"];
echo "Girilen mevcut sayı değişkeninin değeri" .$sayi."<br>";
echo "Formdan gelen Şehir".$sehir."<br><br>";

if($sehir=="ankara"){
$sayi=$sayi+1;

echo "girilen şehir ankara olduğundan sayı değişkenine 1 puan eklendi"."<br>";
echo "sayı değişkenin yeni değeri ".$sayi;

for($x=0;$x<=$sayi;$x++){
echo "mevcut x değişkenin değeri <b>".$x."<br><br>";

}
}
echo "Hata bastırma kontolü<br>";
$baglan=@mysql_connect("localhost","kullanici","mysql şifresi");// baştaki @ işareti koyarak hatayı gizlemiş oluruz.hatayı göstermez.
if(!$baglan) //bağlantı olumlu değilse .
die ("mysql bağlantısı sağlanamadı");

}

?>

PHP STRİNG OPERATÖRLERİ

//string operatörleri
<?php

$mesaj="bu değişkenin içeriği bir mesaj verisidir.";
$adsoyad="ramazan";
$mesaj.="bu değişkenin içeriğindeki mesaj 'mesaj' isimli değişkene eklenmiştir."; // . demek birleştirme demektir.
echo $mesaj."<br>";

echo "merhaba arkadaşlar<font color='red'> ".$adsoyad."</font> hepinizi selamlıyorum";
/*
echo "bu bir mesajdır"
."buda echo komutu içindeki mesajın devamıdır"
."buda devam eden metindir";

*/
?>

PHP MANTIKSAL OPERATÖRLER

//mantıksal operatorler
//index.php
<?php
/*
* || sol veya sağ doğru ise
* or sol veya sağ doğru ise
* && sol ve sağ doğru ise
* and sol ve sağ doğru ise
* xor şartlı sol veya sağ doğru ise
* ! değilse
*
* */

?>

<form action="gelen.php" method="post">
Lütfen değer 1 girin =<input type="text" name="deger1"/>
<br>
Lütfen değer 2 girin =<input type="text" name="deger2"/>
<input type="submit" name="gönder"/>
</form>

//gelen.php
<?php

$a=$_POST["deger1"];
$b=$_POST["deger2"];
/*
if(($a=="dogru")|| ($b=="dogru")){
echo "değerlerden 1 tanesi doğru";

}else{
echo "degerler yanlış";

}
*/
if((!$a=="")){
echo "a değeri dolu";

}else{
echo "a değeri boş";

}

?>

PHP İÇİNDE HTML YAZMA

//php içinde html yazma
PHP kodları içinde HTML kodu yazmak için echo veya print fonksiyonlarını kullanabilirsiniz.
<?php
echo "<html>";
echo "<head></head>";
echo "<body>";
echo "<p class=\"deneme\">Örnek HTML etiketi</p>";
echo $parametre=5;
return $parametre; // Örnek PHP kodu
echo "</body>";
echo "</html>";
?>
----------------------
//php içinde html yazma
<?php
$degisken1 = "Örnek değişken";

echo <<<EOF
<html>
<body>
<p class="deneme">$degisken1</p>
</body>
</html>
EOF;
?>

HTML İÇİNDE PHP YAZMA

//html içinde php yazma
<html>
<head></head>
<body>
<ul>
<?php for($i=1;$i<=5;$i++){ ?>
<li>Örnek <?php echo $i; ?></li>
<?php } ?>
</ul>
</body>
</html>

çıktı
Örnek 1
Örnek 2
Örnek 3
Örnek 4
Örnek 5
Evet gördüğünüz gibi 5 defa for döngüsü içinde örnek adlı li nesnesini PHP ile tekrarlattık.
İleride belki karşınıza çıkar küçük bir ipucu HTML içinde PHP kodlarını yazımı kolay olduğu için genelde
<?=// Buraya kod ?>
<img src="img/egitim/kategori/<?=$row_rsKategori->KategoriResim;?>" width="150" />
<h1><?= KategoriAdiBul($kategoriID); ?> KATEGORİSİ </h1>

PHP KARŞILAŞTIRMA OPERATÖRLERİ

//karşılaştırma operatörleri
index.php
<form action="gelen.php" method="post">
Rakam girin: <input type="text" name="sayi"/>
<input type="submit" value="gönder"/>
</form>
//gelen.php
<?php
$sayi=$_POST["sayi"];
echo "sayi değeri:".$sayi."<br>";
// == eşitse
// === birebir eşitse
// != eşit değilse

if($sayi=="50"){
echo "değer doğru";

}else{
echo "değer yanlış";

}

?>

PHP BİLEŞİK ATAMALAR VE ATAMA OPERATÖRLERİ

//bileşik atamalar ve atama operatorleri
<?php

$a=20;// = Atama operatoru
$y=5;

//$a+=$y; //$a=$a+$y;
//$a-=$y; //bileşik atama operatorleri
//$a*=$y;
$a /=$y;
echo $a;

?>

PHP ARİTMETİK İŞLEMLER

//aritmetik işlemciler
<?php

$s1=5;
$s2=10;
$a=52;

$s3=$s1+$s2;//toplama operatörü
$s4=$s1-$s2;//cıkartma operatörü
$s5=$s1*$s2;//çarpma operatörü
$s6=$s1/$s2;//bölme operatörü
$s7=$a%$s2;//mod operatörü
echo "Toplama operatör sonucu".$s3."<br>";
echo "Çıkartma operatör sonucu".$s4."<br>";
echo "çarpma operatör sonucu".$s5."<br>";
echo "bölme operatör sonucu".$s6."<br>";
echo "mod operatör sonucu".$s7."<br>";
?>

PHP OPERATÖRLERDE İŞLEM ÖNCELİĞİ

//operatorlerde işlem onceliiği
//index.php
<form action="gelen.php" method="post">
Toplama 1=<input type="text" name="sayi1">
<br>
Toplama 2=<input type="text" name="sayi2">
<br>
Carpma 3=<input type="text" name="sayi3">
<br>
<input type="submit" value="gönder"/>
</form>
//gelen.php
<?php

$sayi1=$_POST["sayi1"];
$sayi2=$_POST["sayi2"];
$sayi3=$_POST["sayi3"];

echo "sayi 1: ".$sayi1."<br>"."sayi 2:".$sayi2."<br>"."sayi 3:".$sayi3."<br>";

$a=($sayi1+$sayi2)*$sayi3;
$b=$sayi1+$sayi2*$sayi3;
echo $a."<br>";
echo $b;

?>

PHP LOCATİON REFRESH KOMUTLARI(YÖNLENDİRME)

//location-refresh komutları (yönlendirme)
locationrefresh.php
<form action="gelen.php" method="post">
Lütfen 1 ile 5 arasında bir numara girin <input type="text" name="numara"/>
<input type="submit" value="göönder"/>

</form>

//gelen.php
<?php

$sayi=$_POST["numara"];
//echo $sayi;

if($sayi=="1"){
echo "Yönlendiriliyorsunuz lütfen bekleyin";
header("Location:Gonderilen.php");//beklemeden gonderilen.php dosyasına gider.

} else {
echo "Yönlendiriliyorsunuz lütfen bekleyin";
header("Refresh:2;url=Gonderilen.php"); //2 saniye sonra gönderilen.php sayfasına git.
}

?>
//Gonderilen.php
Burası gönderilen php dosyası

PHP İSSET UNSET EMPTY FONKSİYONLARI

//isset unset ve empty fonksiyonları
<?php
/*
$cd="Bu cd değişkeninin yeni verisi";

if(isset($cd)){//eğer cd diye bir değişken varsa ekrana yazdır

echo $cd;
}else{//cd değişkeni yoksa içini boşalt

unset($cd);//içini boşalt yoket
}
*/
/*
$cd="Bu bir cd değişkeni";
unset($cd);//değişkeni öldürdük
$cd="bu yeni değeridir";
echo $cd;
*/

$cd="Bu bir cd değişkeni";
if(empty($cd)){//eğer veri boş ise
echo $cd ."<br>";
echo "cd değişkenininde veri yok";

} else {
echo $cd ."<br>";
echo "cd değişkenininde veri var";
}

?>

PHP FOREACH DÖNGÜSÜ

//foreach döngüsü
<?php

$esyalar=array(
'Masa',
'sandalye',
'bilgisayar',
'televizyon',
'buzdolabı',
'Çamaşır makinası',
'masaörtüsü'

);

foreach($esyalar as $yaz ){
echo $yaz."<br>";
}

?>

PHP WHİLE DÖNGÜSÜ

//while döngüsü
<?php

$yoneticiler=array(
'Hakikat',
'Mesut',
'LeoparGs',
'Prestij',
'Ramazan',
'Codering',
'Masterbg',
'ahmet',
'mehmet'

);

$satirno=count($yoneticiler);
echo "toplam yönetici sayımız: <font color='ff0000'>".$satirno."</font> Adet<br>";

$satir=0;

while($satir<$satirno){
echo $yoneticiler[$satir]."<br>";
$satir++;

}

?>

PHP FOR DÖNGÜSÜ

//for döngüsü
<?php

$siteler=array(
'Turkekip.com',
'Google.com.tr',
'Bingölonline.net',
'Rizedeyiz.com',
'Teknosayfam.com',

);
$say=count($siteler);

for($x=0;$x<$say;$x++){

echo $siteler[$x]."<br>";

}
?>

PHP COUNT FONKSİYONU

//count ile dizi satir sayisi almak
<?php

$siteler=array(
'Turkekip.com',
'Google.com.tr',
'Bingölonline.net',
'Rizedeyiz.com',
'Teknosayfam.com',

);
$say=count($siteler);
echo $say;
?>

PHP SWİTCH KONTROL YAPISI

//switch kontrol yapısı
//index.php
<form action="gelen.php" method="post">

<table border="1" width="100%">
<tr>
<td>Lütfen bir ay sırası girin</td>
<td>:</td>
<td><input type="text" name="ay"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" value="gönder" /></td>
</tr>
</table>
</form>
//gelen.php
<?php

$ay=$_POST["ay"];

switch ($ay){
case "1":
echo "Girilen ay numarası ocak ayı";
break;
case "2":
echo "Girilen ay numarası şubat ayı<br>";
echo "bu ayın özelliği her yıl 28 çeker<br>";
echo "fakat 4 yılda bir 29 çeker";
break;
case "3":
echo "Girilen ay numarası şubat ayı";
break;

default:
echo "Girilen numaraya göre ay ismi bulunamadı";
}
?>

PHP İF ELSE

//ifelse
//index.php
<form action="gelen.php" method="post">
Mevsim sırası girin:<input type="text" name="mevsim"/>
<input type="submit" value="Gönder"/>
</form>
//gelen.php
<?php
/*
if(){
}
*/
$mevsim=$_POST["mevsim"];
if($mevsim=="1"){

echo "1 inci mevsim : İlk bahar";
}elseif($mevsim=="2"){
echo "2 inci mevsim : Yaz mevsimi";

}elseif($mevsim=="3"){
echo "3 inci mevsim : sonbahar mevsimi";

}
elseif($mevsim==""){
echo "boş bırakmayın";
}
else{
echo "böyle bir mevsim yok";

}

?>

PHP POST VE GET METODLARI

//post ve get metodları
//formlarlacalismak.php
/*post metodu yavaş ve güvenlidir*/
<form action="postgelen.php" method="POST">
Adı:<input type="text" name="adi"></input>
<br>
Soyadi:<input type="text" name="soyad"></input>
<br>
Yaşı:<input type="text" name="yas"></input><br>
<input type="submit" name="gonder" value="Gönder"></input>

</form>
//posgelen.php
<?php

$adi=$_POST["adi"];
$soyadi=$_POST["soyad"];
$yas=$_POST["yas"];

echo "Adı:".$adi."<br>";
echo "soyadı:".$soyadi."<br>";
echo "Yaşı:".$yas."<br>";
?>
------------
//formlarlacalismak.php
/*get metodu hızlıdır ama güvenli değildir*/
<form action="postgelen.php" method="GET">
Adı:<input type="text" name="adi"></input>
<br>
Soyadi:<input type="text" name="soyad"></input>
<br>
Yaşı:<input type="text" name="yas"></input><br>
<input type="submit" name="gonder" value="Gönder"></input>

</form>
//getgelen.php
<?php

$adi=$_GET["adi"];
$soyadi=$_GET["soyad"];
$yas=$_GET["yas"];

echo "Adı:".$adi."<br>";
echo "soyadı:".$soyadi."<br>";
echo "Yaşı:".$yas."<br>";
?>
-------------------
//formlarlacalismak.php
/*request metodu hızlı değil ve güvenli değildir
postla yada get ile göndermenin bir farkı yoktur.herikisiylede gönderilebilir.
*/
<form action="postgelen.php" method="GET">
Adı:<input type="text" name="adi"></input>
<br>
Soyadi:<input type="text" name="soyad"></input>
<br>
Yaşı:<input type="text" name="yas"></input><br>
<input type="submit" name="gonder" value="Gönder"></input>

</form>
//requestgelen.php
<?php

$adi=$_REQUEST["adi"];
$soyadi=$_REQUEST["soyad"];
$yas=$_REQUEST["yas"];

echo "Adı:".$adi."<br>";
echo "soyadı:".$soyadi."<br>";
echo "Yaşı:".$yas."<br>";
?>

--------------------

PHP DİZİ DEĞİŞKENLER

//dizi değişkenler
<?php
$meyveler =array('Elma','Portakal','Mandalina','Muz');

echo "Bu 0 ıncı indist :".$meyveler['0']."<br>";
echo "Bu 1 ıncı indist :".$meyveler['1']."<br>";
echo "Bu 2 ıncı indist :".$meyveler['2']."<br>";
echo "Bu 3 ıncı indist :".$meyveler['3']."<br>";

?>
-------------
//post ve get metodları
//formlarlacalismak.php
/*post metodu yavaş ve güvenlidir*/
<form action="postgelen.php" method="POST">
Adı:<input type="text" name="adi"></input>
<br>
Soyadi:<input type="text" name="soyad"></input>
<br>
Yaşı:<input type="text" name="yas"></input><br>
<input type="submit" name="gonder" value="Gönder"></input>

</form>
//posgelen.php
<?php

$adi=$_POST["adi"];
$soyadi=$_POST["soyad"];
$yas=$_POST["yas"];

echo "Adı:".$adi."<br>";
echo "soyadı:".$soyadi."<br>";
echo "Yaşı:".$yas."<br>";
?>

PHP STANDART DEĞİŞKENLER:ÇOKLU DİL UYGULAMASI

//standart değişkenler
<?php

define("FIYAT","250 YKR.");

echo FIYAT;
?>
--------------------
//standar değişkenler çoklu dil uygulaması yaptık
//index.php
<p align="center"><a href="gelen.php?a=turkce">TURKCE</a>
<a href="gelen.php?a=ingilizce">ENGLISH</a></p>
//ingilizce.php
<?php
define("_ANASAYFA","Home Page");
define("_DOSYALAR","Files Download");
define("_EKART","E-Card");
define("_FORUMLAR","Forums");
define("_UYELER","Member List");
?>
//turkce.php
<?php
define("_ANASAYFA","Ana Sayfa");
define("_DOSYALAR","Dosyalar");
define("_EKART","E-Kart");
define("_FORUMLAR","Forum Köşesi");
define("_UYELER","Üye Listemiz");
?>
//gelen.php

<?php

$a=$_GET["a"];
include("$a.php");

echo '<table border="1" width="25%" cellspacing="0" cellpadding="0">
<tr>
<td>'._ANASAYFA.'</td>
</tr>
<tr>
<td>'._DOSYALAR.'</td>
</tr>
<tr>
<td>'._EKART.'</td>
</tr>
<tr>
<td>'._FORUMLAR.'</td>
</tr>
<tr>
<td>'._UYELER.'</td>
</tr>

</table> ';
?>

PHP DEĞİŞKENLER

//değişkenler
<?php

$meyveler ="Elma,Portakal,Armut,Muz,Çilek..";
$mevsimler="İlkbahar,yaz,sonbahar,kış";

echo $meyveler."<br><br>";
echo $mevsimler;
?>
-----------------
//değişkenler
<?php

$adi ="ramazan aras";
$dogumyeri="istanbul";
$yasi="25";
$kangrubu="a rh+";

echo "Adi Soyadi<font color=\"ff000\">".$adi."</font><br>";
echo "doğum yeri ".$dogumyeri."<br>";
echo "yaşı".$yasi."<br>";
echo "kan grubu".$kangrubu;
?>

PHP VERSİYONU ÖĞRENME

<?php
phpinfo();

?>
-------------------
//echo ve print komutu
<?php

echo "merhaba 'dünya' <br>";
echo "merhaba \" dünya"; // ters slash işaretiyle çift tırnağı yok sayıyoruz
//print "bu yazım komutu print komutu";

?>

25 Temmuz 2016 Pazartesi

CSS3 NOTLARIM

#govde #bolum1 p+h3{
margin:20px 0 5px 0;
} //p ve h3 kardeş durumundaki olanları aldık.
-----------------
//cocuk seçici
#govde #bolum1 > ul > li {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #CCC;
list-style-type: none;
padding-left: 30px;
background-image: url(../images/cicek.png);
background-repeat: no-repeat;
line-height: 24px;
background-position: 2px 0px;
}
----------------------
a[href$=".psd"]{
//.psd uzantılı verdiğimiz linklere css özelliği verebiliri.

}
-----------------
//Alt özelliğinde sıcak geçmeyenlere uygula css özelliklerini
#govde # bolum1 img:not([alt*="Sıcak"]){
border:#33FF99 3px solid;

}
-------------------
//target başlık değiştirildi hedef başlığı(target pseudo-class selectors-hedef seçiciler)
#govde #bolum1 div:target h3{
color:#FFF;
background-color:#666;
font-size:30px;
}
----------------
(ilk ek seçiciler)
a[href^="http://"]{
background:url(../images/ok.png) no-repeat right center;
color:#fc6
}
-------------
//divler içindeki ilk başlığa özellikleri veriyoruz
#govde #bolum1 h3:first-child{
color:red;

}
--------------------------
//divlerin içindeki son elemana uyguladık.
#govde #bolum1 h3:last-of-type{
color:red;

}
-----------------
//liste elemanı seçiciler ikinci elemana bu özeeliiği uygula
#govde #bolum1 ul li:nth-child(2){
color:red;

}
--------------------
//tablo seçiciler
#govde #bolum1 table tr:first-child{ //tablonunu ilk satırına özellikler verdik

}
--------------
//özel eleman seçiciler
#govde #bolum1 img[alt*="Sıcak"]{
border:#FF6600 2px dashed;

}
---------------
//renkler
rgba(250,150,100,0.5) ; 0.5 dersek saydamlık ayarlıyoruz.(opacity)
--------------------
duz(linear)gradient
background:gradient(linear,left top,left bottom,color-stop(0.25,rgb(76,80,105)),color-stop(0.55,rgb(208,163,202))));
radial gradient
background: radial-gradient(radial,500,500,25,500,500,300,from(rgb(76,80,105)),to(rgb(208,163,202)));
----------------
//font kullanımı
@font-face{

font-family:"Chalk-Duster";
src:url(../_font/Chalk-Duster/chalkduster-webfont.ttf);
}
#govde #bolum1 p {
font-family:'Chalk-Duster',"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #CCC;
padding: 0px;
margin: 0px;
}
-------------
//yazılara gölge verme(text shadow)
text-shadow:2px 2px 2px #fff; //x,y,blur,renk

//yazılarda üst üste gölge kullanımı
text-shadow:0px 0px 5px #999999,0px 0px #F90 ,0px 0px 5px #669933 ;
----------------------
//kolon uygulaması (divleri kolon yapma)
#govde #bolum1 h3+div{
-moz-column-count:2;
-webkit-column-count:2; // kaç sutun olacağını söylüyoruz
column-count:2;
-moz-column-width:100px;
-webkit-column-width:100px;
column-width:100px;
-moz-column-gap:40px;// iki sutun arasındaki boşluk
-webkit-column-gap:40px;
column-gap:40px;

//kolonlar arasındaki çizgi yaptık stil özellikleri verdik
-moz-column-rule:1px;
-moz-column-rule-color:#fff;
-moz-column-rule-width:2px;
-moz-column-rule-style:solid;

column-rule:1px;
column-rule-color:#fff;
column-rule-width:2px;
column-rule-style:solid;

text-align:justify;
}

---------------------------
//div yerleştirme modeli
#govde #kutular{
width:100%;
height:1000px;
//divi kutu yaptık.
display:-moz-box;
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;//divleri yatay olarak yerleştirdik.
-moz-box-orient:horizontal;
box-orient:horizontal;
-moz-box-align:end;
-webkit-box-align:end;
box-align:end;
-moz-box-pack:start;
-webkit-box-pack:start;
box-pack:start;

}
-------------------------------
//divleri ters yerleştirme(reverse box)
#govde #kutular{
width:100%;

//divi kutu yaptık.
display:-moz-box;
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;//divleri yatay olarak yerleştirdik.
-moz-box-orient:horizontal;
box-orient:horizontal;
-moz-box-direction:reverse;
-webkit-box-direction:reverse;
box-direction:reverse;

}
---------------------------------
//divleri numaralandırarak yerleştirme
#govde #kutular #birinci {
-moz-box-ordinal-group:5;
-webkit-box-ordinal-group:5;
box-ordinal-group:5;

}
#govde #kutular #ikinci {
-moz-box-ordinal-group:4;
-webkit-box-ordinal-group:4;
box-ordinal-group:4;

}
#govde #kutular #ucuncu {
-moz-box-ordinal-group:3;
-webkit-box-ordinal-group:3;
box-ordinal-group:3;
}
#govde #kutular #dorduncu {
-moz-box-ordinal-group:1;
-webkit-box-ordinal-group:1;
box-ordinal-group:1;
}
#govde #kutular #besinci {
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
box-ordinal-group:2;

}
-------------------------------
//divleri dikeyde ortalama(vertical align)
#govde #kutular{
width:100%;
height:1000px;
//divi kutu yaptık.
display:-moz-box;
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;//divleri yatay olarak yerleştirdik.
-moz-box-orient:horizontal;
box-orient:horizontal;
-moz-box-align:start; //start,end,center özelliklerini alabilir.
-webkit-box-align:start;
box-align:start;
}
---------------
//divleri yatayda ortalama(horizantal)
#govde #kutular{
width:100%;
height:1000px;
//divi kutu yaptık.
display:-moz-box;
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;//divleri yatay olarak yerleştirdik.
-moz-box-orient:horizontal;
box-orient:horizontal;
-moz-box-align:center;
-webkit-box-align:center;
box-align:center;

//yatayda sona atıyoruz.
-moz-box-pack:end; //justify dersek divler arası mesafe bırakır.
-webkit-box-pack:end;
pack-align:end;
}
---------------
//köşe yuvarlaama(border radius)
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
---------------
//çerçeve fotograf verme(border image)
#govde #sol_bolum01 {
float: left;
height: 400px;
width: 240px;
position: relative;
background-color: #666;
margin-bottom: 10px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
border:10px #666 solid ;
-webkit-border-image:url(../images/border.png) 27 27 27 27 round round ;
-moz-border-image:url(../images/border.png) 27 27 27 27 round round ;
border-image:url(../images/border.png) 27 27 27 27 round round ; //border image
}
------------------
//div gölge uygulama(box shadow)
box-shadow:3px 3px 5px #ff0; //x,y,blur,yellow blur:bulanıklık
-----------------
//background image akıllı ölçeklendirme(cover,content)
background-size:contain; //resmi yatayda sığdırma
background-size:cover; //resmi dikeyde sığdırma
--------------------
//çoklu background(ardalan) kullanımı
background:url(../images/border.png) no-repeat,url(../images/background.png);
background-repeat:no-repeat;
background-position:top left,bottom left;
background-size:20px 20px , 20px 20px;
------------------------------
//background-konumlama
background-origin:content-box;
background-origin:border-box;
--------------------
//basit animasyonlar
#govde #bolum1 img:hover {
transform:scale(1.5); /*resmi 1.5 katı kadar büyütür.*/

}

#govde #bolum1 img:hover {
transform:rotate(45deg); /*resmi 45 derece kadar döndürür..*/

}

#govde #bolum1 img:hover {
transform:skew(10deg); /*resmi 10 derece kadar büker.*/

}
#govde #bolum1 img:hover {
transform:translate(10px,10px); /*resmi 10px kadar konumu değiştirir x ve y de */

}

----------------
//hareket merkez noktası değiştirme
#govde #bolum1 img:hover {
transform: rotate(45deg);
transform-origin:bottom right;//sağ alt köşeden

}
---------------
//geçiş efektleri(transition effects)
#govde #bolum1 img {
margin: 15px;
transition-property:scale(); //scale komutunda geçiş efekti yap
transition-duration:1s; //1sn sürsün

/*transition:all 3s; üsttekiler yerine bunu yazarsak daha kısa olur*/

}
#govde #bolum1 img:hover {
transform-origin:center-top;
transform:scale(1.5);

}
---------------------
//ivme etkileri
#govde #bolum1 img {
margin: 15px;
transition:all 1.5s ease-out; //ease:ivmelendirme(yumuşatma) ,ease-in:başta yavaş sonra hızlı ,ease-out:başta hızlı sonra yavaş geliyor.

}
#govde #bolum1 img:hover {
transform-origin:center-top;
transform:scale(1.5);
background:#999;
padding:0px 0px 40px 0px;
border-radius:0px 0px 10px 10px;
box-shadow:#000 2px 2px 3px ;
}
--------------------

19 Temmuz 2016 Salı

Javascript Ping Pong Oyunu

Html5 ve javascript kullanarak yaptığım oyun

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
padding:0;
margin:0;
overflow:hidden;/*scroll çıkmaması için*/
}
</style>
</head>
<body>
<canvas id="canvas"> </canvas>
<audio preload="true" id="carp">
<source src="Tinie Tempah - Girls Like (Official Video).mp3"/>
// <source src="Tinie Tempah - Girls Like (Official Video).mp3"/>
<audio>
<script>
/* -----------------*/
//setInterval yerine kullandık aşağıdaki ifadeyi
//canvas animasyonumuz için gerekli kod
window.animasyonFrameIstegi=(function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msequestAnimationFrame ||
function (callback){
return window.setTimeout(callback,1000/60); //1 saniyede 60 defa kodu çalıştır demek.
};
})();

//animasyonu durdumak için kullanacaz.
window.animasyonFrameIptal=(function(){
return window.cancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout();
})();

/* ---------------*/
//canvas değişkeni
var canvas=document.getElementById("canvas"),
ctx=canvas.getContext("2d"),//canvas context oluşturduk.
G=window.innerWidth, //oyun alanı genişliği
Y=window.innerHeight,//oyun alanı yüksekliği
mouse={},//mouse objesi(nesnesi) tanımladık
parcalar=[],//parçaları içeren array
topum={}, //top objesi(top nesnesi)
cubuk=[2], //iki cubugu içeren array
puanlar=0,//kullanıcıların puanları
hiz=60,//hız saniye başına frame
carpismaParcacigi=20,//carpışma anaında çıkacak parçaçık sayısı
carpismaDegiskeni=0,
parcaPozisyonu={},//parçaların yörüngesi
kivilcimDegiskeni=1,
baslatButon={},//başlat butonu objesi(nesnesi)
resetButon={},//reset buton objesi(nesnesi)
bitti=0,
res,//animasyonu başlatan değişken
cubukCarpisma;

//canvasın tam ekran olmasını sağladık.
canvas.width=G;
canvas.height=Y;

//canvasta mouse hareketlerini algılamak için yaptık bu ifadeleri
canvas.addEventListener("mousemove",mouseHareket,true);//mouse hareket ederken mouseHareket fonksiyonunu çağır
canvas.addEventListener("mousedown",butonTiklandi,true);//mouse basılıyken butonTiklandi fonksiyonunu çağır

//carpışma müziği
carpisma=document.getElementById("carp");

//top nesnemizi tanımlıyoruz.
topum={
x:50, //topun x eksenindeki konumu
y:50, //topun y eksenindeki konumu
r:5, //yarıçap
c:"white", //renk
xh:4, //x ekseni hızı
yh:8, //y ekseni hızı

ciz:function(){
ctx.beginPath();
ctx.fillStyle=this.c;
ctx.arc(this.x,this.y,this.r,0*Math.PI,2*Math.PI,false);
ctx.fill();
}
};

//başlat butonu
baslatButon={
w:100, //genişlik
h:50, //yükseklik
x:G/2-50, //x konumu
y:Y/2-25, //y konumu

ciz:function(){
ctx.strokeStyle="white"; //karenin rengi
ctx.lineWidth=2; //karenin çizgi genişliği
ctx.strokeRect(this.x,this.y,this.w,this.h); //karenin x ve y konumu //karenin genişliği yüksekliği
ctx.font="18px Arial,sans-serif";
ctx.textAlign="center"; //karenin içindeki yazının konumunu belirttik
ctx.textBaseline="middle";
ctx.fillStyle="white"; //Başla yazısının rengi
ctx.fillText("Başla",G/2,Y/2); //Başla yazısının konumu

}
};

//reset butonu
//başlat butonu
resetButon={
w:100, //genişlik
h:50, //yükseklik
x:G/2-50, //x konumu
y:Y/2-50, //y konumu

ciz:function(){
ctx.strokeStyle="white"; //karenin rengi
ctx.lineWidth=2; //karenin çizgi genişliği
ctx.strokeRect(this.x,this.y,this.w,this.h); //karenin x ve y konumu //karenin genişliği yüksekliği
ctx.font="18px Arial,sans-serif";
ctx.textAlign="center"; //karenin içindeki yazının konumunu belirttik
ctx.textBaseline="middle";
ctx.fillStyle="white"; //Başla yazısının rengi
ctx.fillText("Tekrar Oyna",G/2,Y/2-25); //Başla yazısının konumu

}
};

//kivilcim oluştur
function parcacikOlustur(x,y,m){ //x ve y pozisyon m 'de parcacık sayısı
this.x=x || 0;
this.y || 0 ;

this.radius=1.2;

this.xh=-1.5+Math.random()*3; //topun x hızı
this.yh=m*Math.random()*1.5; //topun y hızı

}

//hizi arttırıyoruz.
function hizArttir(){

if(puanlar%4 ==0)
if(Math.abs(topum.xh)<15){
topum.xh+=(topum.xh<0)? -1 : 1;
topum.yh+=(topum.yh<0)? -2 : 2;
}
}

//çubuk için fonksyion oluştur
function Kurek(poz){
this.h=5; //kürek yüksekliği
this.w=150; //kürek genişliği

//kurek pozisyonu
this.x=G/2-this.w/2;
this.y=(poz=="ust")? 0:Y-this.h; //ternary(if yapısı) kullandık. //aşağıdaki çubuğun düzgün görünmesi için yaptık.
}

//çubuk arrrayimize küreklerimizi ekliyoruz.
cubuk.push(new Kurek("asagi"));
cubuk.push(new Kurek("ust"));

//tuval çizmek için gerekli fonksiyon
function canvasCiz(){
ctx.fillStyle="black";
ctx.fillRect(0,0,G,Y);/*ekranı doldurduk. siyah yaptık.*/
}

//herşeyi canvas bölgesinde çizmek için gerekli fonksiyon
function ciz(){
canvasCiz();
for(var i=0;i<cubuk.length;i++){
p=cubuk[i];
ctx.fillStyle="white";
ctx.fillRect(p.x,p.y,p.w,p.h);
}
topum.ciz();
guncelle();
}

//animasyonları çalıştırmak için oluşturduğumuz döngü
function animDongu(){
res=animasyonFrameIstegi(animDongu);
ciz();
}
//animDongu(); //browser açıldığında başlar bu döngü.

function baslamaEkranı(){
ciz();
baslatButon.ciz();
}

//ekrandaki değişiklikleri güncelle fonksyionu gösterecek.
function guncelle(){

skoruGuncelle();//skorumuzu güncellicez.

//topu hareket ettiriyoruz
topum.x+=topum.xh;
topum.y+=topum.yh;

//cubugu hareket ettiriyoruz
if(mouse.x && mouse.y){ //eğer mouseda bir hareketlilik varsa aşağıdakileri yap.

for(var i=1;i<cubuk.length;i++ ){

p=cubuk[i];
p.x=mouse.x-p.w/2; //mouse nereye giderse çubukda oraya gidiyor.
}
}

//cucukları çağır
p1=cubuk[1];
p2=cubuk[2];

//çarpışma işleminin gerçekleştiği yer.
if(carpismalar(topum,p1)){ //topla çubuk birbirine değdiği anı yapıyoruz.carpısmalar fonksyionundan true dönerse bunu yapıyoruz.
carpismaEylemi(topum,p1);

}else if(carpismalar(topum,p2)){
carpismaEylemi(topum,p2);
}else{// oyunda yandığımızda yapılan işlemler (carpismalar fonksiyonundan false dönerse bunu yapıyoruz.)
//top üst veya aşağı çubuga çarparsa yapılacak işlemler
if(topum.y+topum.r>Y){ //top yüksekliği geçerse yani oyun dışına çıkarsa kaybediyoruz.üst kısım için
topum.y=Y-topum.r;
oyunBitti();
}else if(topum.y<0){//top yüksekliği geçerse yani oyun dışına çıkarsa kaybediyoruz.alt kısım için
topum.y =topum.r;
oyunBitti();
}

//top sağ ve sol duvara çarparsa
if(topum.x+topum.r>G){
topum.xh=-topum.xh; //sağ tarafa çarparsa geri dönmesi için.
topum.x=G- topum.r;//top sağ tarafa tam çarptığı anda geri dönmesi için
}else if(topum.x-topum.r<0){
topum.xh=-topum.xh;//sol tarafa çarparsa geri dönmesi için.
topum.x=topum.r;
}

}//else bitişi

if(carpismaDegiskeni==1){
for(var k=0;k<carpismaParcacigi;k++){
parcalar.push(new parcacikOlustur(parcaPozisyonu.x,parcaPozisyonu.y,cogalt));

}

}

//parcalarıyay fonksiyonu
parcalariyay();
carpismaDegiskeni=0;//parçaları sonradan silmek için

}//güncelle fonksiyon sonu

//mousemuzu hareket ettiriyoruz.
function mouseHareket(e){
//sağ ve sol yönde hareket ettirmemizi sağlayan işlemler
mouse.x=e.pageX; // x koordinatı
mouse.y=e.pageY; // y koordinatı

}

//top ile çubuk arasındaki çarpışmyı kontrol eden fonksiyon
function carpismalar(b,p){ //b:top ,p:cubuk
if(b.x +topum.r>=p.x && b.x-topum.r<=p.x+p.w){ // (x ekseni yani x koordinatı) x ekseninde top ile cubugun çarpışma durumunu kontrol ettik
if(b.y>=(p.y-p.h) && p.y>0){ //y ekseninde top çubugu geçmeden için yapılan işlemler.
cubukCarpisma=1;
return true;

}else if(b.y<=p.h && p.y==0){ //buradada oyunun bitmesini sağlıyoruz.top cubugu geçerse yanıyoruz.
cubukCarpisma=2;
return true;
}else {
return false;
}

}

}

//carpışma işlemninin gerçekleştiği an
function carpismaEylemi(topum,p){ //p:parçaçık
topum.yh= -topum.yh;

if(cubukCarpisma==1){ //top yukarı çarptığında
topum.y=p.y-p.h;
parcaPozisyonu.y=topum.y-topum.r;
cogalt=-1;
}else if(cubukCarpisma==2){ //top aşağıya çarptığında
topum.y=p.h+topum.r;
parcaPozisyonu.y=topum.y-topum.r;
cogalt=1;
}
puanlar++;
hizArttir();

if(carpisma){
if(puanlar>0){
carpisma.pause();
}
carpisma.currentTime=0;
carpisma.play();

}
parcaPozisyonu.x=topum.x;
carpismaDegiskeni=1;

}

//parçaları dağıttığımız bölüm
function parcalariyay(){
for(var j=0;j<parcalar.length;j++){
par=parcalar[j];
ctx.beginPath();
ctx.fillStyle="white";
if(par.radius>0){
ctx.arc(par.x,par.y,par.radius,0,2*Math.PI,false);
}
ctx.fill();
par.x+=par.xh;
par.y+=par.yh;

//parçacıkları oluştuktan sonra kaybet
par.radius=Math.max(par.radius-0.05,00);
}

}

//puan tablosu
function skoruGuncelle(){
ctx.fillStyle="white";
ctx.font="16px Arial,sans-serif";
ctx.textAlign="left"; //solda
ctx.textBaseline="top";//pozisyonu belirledik yukarıda solda
ctx.fillText("Puan: "+puanlar,20,20);//yazının genişliği ve yüksekliği 20 20

}

//oyunu bitiren fonksyion
function oyunBitti(){
ctx.fillStyle="white";
ctx.font="20px Arial,sans-serif";
ctx.textAlign="center";
ctx.textBaseline="middle";//yazıyı ortalayacak
ctx.fillText("Yenildin loo :( -Toplamda"+puanlar+"puan aldin",G/2,Y/2+25);//yazının konumunu belirledik.

animasyonFrameIptal(res);

bitti=1;

resetButon.ciz();//oyun bittiğinde reset butonu belirir.
}

//buton tıklandığında başla veya resetle
function butonTiklandi(e){

//mouse pozisyonu sakla
var mx=e.pageX, //mouseun x eksenindeki hareketini yakaladık
my=e.pageY; //mouseun y ekesenindeki hareketini yakaladık

//başlat butonuna tıkla
if(mx>baslatButon.x && mx<=baslatButon.x+baslatButon.w){
animDongu();

//baslat butonu ekrandan sil
baslatButon={};
}
if(bitti==1){
if(mx>resetButon.x && mx<=resetButon.x+resetButon.w){
topum.x=20;
topum.y=20;
puanlar=0;
topum.xh=4;
topum.yh=8;
animDongu();

bitti=0;
}
}
}
baslamaEkranı();

</script>
</body>
</html>

18 Temmuz 2016 Pazartesi

HTML5 CANVAS ÇİZİM PALETİ YAPMA(KALEMLE ÇİZİM YAPMA)

HTML5 CANVAS DUVARA ÇARPAN TOPLAR

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var mycanvas = document.getElementById("canvas");
var ctx = mycanvas.getContext("2d");
var w=window.innerWidth;
var h=window.innerHeight;
mycanvas.width=w;
mycanvas.height=h;
ctx.fillStyle="black";/*ekranın tamamını siyahla kapladık*/
ctx.fillRect(0,0,w,h);

var toplar=[];
for(var a=0;a<50;a++){
toplar.push({"px":w/2,"py":h/2,"vx":5-10*Math.random(),"vy":5-10*Math.random()});

}
function animasyon(){
ctx.clearRect(0,0,w,h);
ctx.fillStyle="black";/*canvasın rengini belirledik*/
ctx.fillRect(0,0,w,h);/*canvası çizdik*/
ctx.fillStyle="white";/*topların rengini beyaz yaptık*/
for(var b=0;b<50;b++){
ctx.beginPath();
ctx.arc(toplar[b].px,toplar[b].py,15,0*Math.PI,2*Math.PI); /*toplarımızın konumunu ve yarıçapını belirledik*/
ctx.fill();
toplar[b].px+=toplar[b].vx*2; /*pozisyonuna hızı ekledik*/
toplar[b].py+=toplar[b].vy*2;

if(toplar[b].px>=w){ /*duvara çarptıgında geri dönmesini sağladık*/
toplar[b].vx=-toplar[b].vx;
}
if(toplar[b].px<=0){/*duvara çarptıgında geri dönmesini sağladık*/
toplar[b].vx=-toplar[b].vx;
}
if(toplar[b].py>=h){/*duvara çarptıgında geri dönmesini sağladık*/
toplar[b].vy=-toplar[b].vy;
}
if(toplar[b].py<=0){/*duvara çarptıgında geri dönmesini sağladık*/
toplar[b].vy=-toplar[b].vy;
}

}
}

setInterval(animasyon,20);

}
</script>
</head>

<body>
<canvas id="canvas" ></canvas>
</body>
</html>

HTML5 CANVAS DAİRESEL GRAFİK ÇİZİMİ

<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.test{
border:2px solid #eee;
width:20px;
height:20px;
display:inline-block;
}
canvas{
background-color: #eee;
border:2px solid dotted;
border:2px solid #d3d3d3;
/* background-color: #000;*/
}
#gosterge{
position:absolute;
top:380px;
left:50px;
}
</style>
<script>
window.onload = function () {
var angle=Math.PI/180;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var domates=120;//red
var patates=180;//sarı
var patlican=60;//black
var sayi=0;
function eylem(){
if(sayi>=360){
clearInterval(saydir);
ctx.beginPath();
ctx.arc(200,200,20,0*Math.PI,2*Math.PI);
ctx.fill();

ctx.beginPath();
ctx.strokeStyle="blue";
ctx.arc(200,200,100,0*Math.PI,2*Math.PI);
ctx.stroke();
}
if(sayi<=domates){
ctx.fillStyle="red";
}
else if(sayi>domates && sayi<=patates+domates){
ctx.fillStyle="yellow";
}
else{
ctx.fillStyle="black";
}
// ctx.clearRect(0,0,400,400);
ctx.translate(200,200);
ctx.rotate(angle);
ctx.translate(-200,-200);
ctx.fillRect(200,200,2,100);
sayi+=1;
}

saydir=setInterval(eylem,5);
}
</script>

</head>
<body>

<canvas id="canvas" height="400" width="400" >
Your browser does not support the HTML5 canvas tag.</canvas>
<div id="gosterge">
<div style="background-color:red" class="test"></div>domates 120
<div style="background:yellow" class="test"></div>patates 150
<div style="background:black" class="test"></div>patlıcan 90
</div>

</body>
</html>

HTML5 CANVAS ATEŞ EFEKTİ YAPMA

<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
canvas{
position:absolute;
top:0;
left:0;
margin:0;
padding:0;

border:2px solid #d3d3d3;
/* background-color: #000;*/
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
h=window.innerHeight;/*windowsun yükseklik değerini alır*/
w=window.innerWidth;/*windowsun genişlik değerini alır*/
canvas.height=h;
canvas.width=w;
//ctx.fillRect(0,0,w,h);

fires=[];
for (var a=0;a<100;a++){
fires.push({"x":w/2-100*Math.random(),"y":h/2,"r":30*Math.random(),"vy":5*Math.random(),"life":100*Math.random()})
}

function eylem(){
ctx.fillStyle="black";//çizilen karenin rengini siyah yaptık
ctx.clearRect(0,0,w,h);
ctx.fillRect(0,0,w,h);/*ekranı tamemen siyahla kapladık windowsun genişliği ve yüksekliği kadar.*/

ctx.globalCompositeOperation="lighter";/*renkleri saydamlaştırıyor üst üste bindiriyor.*/
for(var b=0;b<100;b++){
var renk=ctx.createRadialGradient(fires[b].x,fires[b].y,2,fires[b].x,fires[b].y,fires[b].r)//x1,y1,r1,x2,y2,r2
renk.addColorStop(0,"white");
renk.addColorStop(0.4,"yellow");
renk.addColorStop(0.6,"orange");
renk.addColorStop(1,"red");
ctx.fillStyle=renk;/*topların rengini gradient renklerinden yaptık*/
ctx.beginPath();
ctx.arc(fires[b].x,fires[b].y,fires[b].r,0*Math.PI,2*Math.PI);
ctx.fill();

fires[b].y-=fires[b].vy;
fires[b].r-=0.4;
fires[b].life-=1;

if(fires[b].life<0 || fires[b].r<0 || fires[b].y<100){
fires[b].x=w/2-100*Math.random();
fires[b].y=h/2;
fires[b].r=30*Math.random();
fires[b].life=100*Math.PI;
}
}

}

setInterval(eylem,30);

}
</script>

</head>
<body>

<canvas id="canvas" >
Your browser does not support the HTML5 canvas tag.</canvas>

</body>
</html>

HTML5 CANVAS TEXT ALİGN ÖZELLİĞİ

<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="newCascadeStyleSheet.css" rel="stylesheet" type="text/css"/>
<style>
canvas{

border:1px solid #d3d3d3;
/* background-color: #000;*/
}
</style>
<script>
window.onload = function () {
var benimtuval = document.getElementById("mycanvas");
var ctx = benimtuval.getContext("2d");
ctx.font="30px arial";
ctx.textAlign="start";//end:bitişe ekler start:noktanın başına ekliyor ,right sağına ekler,left soluna ekler.
ctx.fillText("merhaba dünya ",300,200);

ctx.beginPath();
ctx.arc(300,200,5,0*Math.PI,2*Math.PI);
ctx.fill();

}
</script>

</head>
<body>

<canvas id="mycanvas" width="600" height="400" >
Your browser does not support the HTML5 canvas tag.</canvas>

</body>
</html>

HTML5 CANVAS KAR YAĞIŞI EFEKTİ YAPTIK GÜZEL UYGULAMA

<!DOCTYPE html>
<html>
<head>
<style>
canvas{

border:1px solid #d3d3d3;
/* background-color: #000;*/
}
</style>
<script>
window.onload = function () {
karlar=[];
for(var a=0;a<1000;a++){
karlar.push({"x":600*Math.random(),"y":400*Math.random(),"vy":1,"r":Math.random()});
//"ad":ramazan, "soyad":aras obje mantıgında yaptık
}
var benimtuval = document.getElementById("mycanvas");
var ctx = benimtuval.getContext("2d");
pen=new Image();
pen.src="pen.png";
resim=new Image();
resim.src="kartanesi.jpg";

function eylem(){
ctx.clearRect(0,0,600,400);
ctx.drawImage(pen,0,0,pen.width,pen.height,0,0,benimtuval.width,benimtuval.height);
ctx.fillStyle="#eee";
ctx.globalAlpha=0.8;
for(var b=0;b<karlar.length;b++){
ctx.beginPath();
ctx.arc(karlar[b].x,karlar[b].y,karlar[b].r,0*Math.PI,2*Math.PI);
ctx.fill();

karlar[b].y+=karlar[b].vy;
karlar[b].x+=0.3-Math.random();
if(karlar[b].y>600){
karlar[b].x=600*Math.random();/*0 ile 600 arasında değer üretir*/
karlar[b].y=-400*Math.random();
karlar[b].r=Math.random();/*0 ile 1 arasında değerler üretir*/
karlar[b].vy=10*Math.random();
}
ctx.globalAlpha=0.5;/*saydamlık veriyoruz yazıya*/
ctx.font="bold 30pt arial";
ctx.fillText("NEW YEARS",150,150);
ctx.globalAlpha=1;
}
}
setInterval(eylem,20);
}
</script>

</head>
<body>
<img src="pen.png" style="display:none" />
<img src="kartanesi.jpg" id="resim" style="display:none" />
<canvas id="mycanvas" width="600" height="400" >
Your browser does not support the HTML5 canvas tag.</canvas>

</body>
</html>

HTML5 CANVAS ZIPLAYAN TOP UYGULAMASI

<!DOCTYPE html>
<html>
<head>
<style>
canvas{

border:1px solid #d3d3d3;
/* background-color: #000;*/
}
</style>
<script>
window.onload = function () {
var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
resim=document.getElementById("resim");

pozx=20;
pozy=100;
vx=10;
vy=-10;
gravitiy=2;
function eylem(){
if(pozy>350){
vx*=0.75;
vy*=-0.65;
// ctx.scale(1.11,1); //top yere değerken basık görünmesi için
}

ctx.clearRect(0,0,600,400);/*ctx.clearRect(0,0,canvas.width,canvas.height)*/
ctx.drawImage(resim,0,0,resim.width,resim.height,pozx,pozy,50,50);
vy+=gravitiy;
pozx+=vx;
pozy+=vy;
}
setInterval(eylem,100);
}
</script>

</head>
<body>
<img id="resim" style="display:none" src="top.png"/>
<canvas id="mycanvas" width="600" height="400" >
Your browser does not support the HTML5 canvas tag.</canvas>

</body>
</html>

HTML5 CANVAS GLOBALCOMPOSİTİONOPARATİON

<!DOCTYPE html>
<html>
<head>
<style>
canvas{

border:1px solid #d3d3d3;
/* background-color: #000;*/
canvas {
cursor:none;
}
}
</style>
<script>
window.onload = function () {
benimtuval=document.getElementById("mycanvas");
ctx=benimtuval.getContext("2d");
ctx.fillStyle="blue";
ctx.fillRect(50,50,200,200);
ctx.globalCompositeOperation="xor";
ctx.beginPath();
ctx.shadowColor="#999";
ctx.shadowOffsetX=5;
ctx.shadowOffsetY=5;
ctx.shadowBlur="5";
ctx.fillStyle="red";
ctx.arc(145,145,75,0,2*Math.PI);
ctx.fill();

}

</script>

</head>
<body>
<img id="resim" src="bebek.png" style="display:none"/>
<canvas id="mycanvas" width="600" height="400" >
Your browser does not support the HTML5 canvas tag.</canvas>

</body>
</html>

HTML5 CANVAS CANVAS BAĞIMSIZ ÇİZİMLER(ÇİZGİLER)

<!DOCTYPE html>
<html>
<head>
<style>
canvas{

border:1px solid #d3d3d3;
/* background-color: #000;*/
canvas {
cursor:none;
}
}
</style>
<script>
window.onload = function () {
benimtuval=document.getElementById("mycanvas");
ctx=benimtuval.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(50,50);
ctx.lineTo(150,80);
ctx.stroke();

ctx.beginPath();
ctx.lineTo(200,200);
ctx.arc(200,200,10,0*Math.PI,2*Math.PI);
ctx.lineTo(250,85);
ctx.arc(250,85,10,0*Math.PI,2*Math.PI);
ctx.fillText("merhaba dünya",250,250);
ctx.stroke();

}

</script>

</head>
<body>
<img id="resim" src="bebek.png" style="display:none"/>
<canvas id="mycanvas" width="600" height="400" >
Your browser does not support the HTML5 canvas tag.</canvas>

</body>
</html>

HTML5 CANVAS OPACİTY(SAYDAMLIK) SAVE VE RESTORE KOMUTLARI

<!DOCTYPE html>
<html>
<head>
<style>
canvas{

border:1px solid #d3d3d3;
/* background-color: #000;*/
canvas {
cursor:none;
}
}
</style>
<script>
window.onload = function () {
benimtuval=document.getElementById("mycanvas");
ctx=benimtuval.getContext("2d");
pozx=180;
pozy=180
vx=-10;
vy=-10;

function eylem(){

ctx.clearRect(0,0,600,400);
ctx.fillStyle="red";
ctx.fillRect(0,0,200,200);
ctx.save();/*öncekileri(3kodu) kaydeder.*/
ctx.globalAlpha=0.51;/*nesneleri saydamlaştırıyor.*/
ctx.fillStyle="blue";
ctx.fillRect(pozx,pozy,200,200);
pozx+=vx;
pozy+=vy;
ctx.restore();/*önceki(kaydedilen) ayarları tekrar uygula*/
}
setInterval(eylem,50);

}

</script>

</head>
<body>
<img id="resim" src="bebek.png" style="display:none"/>
<canvas id="mycanvas" width="600" height="400" >
Your browser does not support the HTML5 canvas tag.</canvas>

</body>
</html>