Canvas Cizim Uygulamasi - 👉 Canlı Demoyu Aç

Tarayicida calisan, saf HTML, CSS ve JavaScript ile gelistirilmis basit bir cizim uygulamasidir. Kullanici; serbest cizim yapabilir, cizgi ve sekiller olusturabilir, metin ekleyebilir, grid acip kapatabilir ve ortaya cikan calismayi PNG olarak kaydedebilir.

Ozellikler

• Serbest cizim
• Duz cizgi cizme
• Dikdortgen ve daire cizme
• Firca boyutu ve renk secimi
• Farkli firca stilleri: serbest, sprey, daire damga
• Metin ekleme ve font boyutu secimi
• Silgi modu
• Geri al / ileri al destegi
• Canvas temizleme
• PNG olarak kaydetme
• Grid gosterme ve grid'e hizalama
• Dokunmatik ekran destegi

Kullanilan Teknolojiler

• HTML5
• CSS3
• JavaScript
• Canvas API

Proje Yapisi

canvas-izim/
├── index.html
├── css/
│   └── index.css
└── style/
    └── index.js

Calistirma

Kurulum gerektirmez.

1. Projeyi bilgisayariniza indirin veya klonlayin.
2. index.html dosyasini tarayicida acin.

Isterseniz gelistirme sirasinda Live Server gibi bir aracla da calistirabilirsiniz.

Kullanim

• Boyut alani ile cizgi kalinligini belirleyin.
• Renk Sec menusunden cizim rengini degistirin.
• Cizim Modu ile serbest cizim veya sekil modlari arasinda gecis yapin.
• Firca Modu ile farkli cizim hissiyatlari secin.
• Metin Ekle ile canvas uzerine yazi yerlestirin.
• Kilavuz Goster ile grid'i acip kapatin.
• Snap to Grid ile imleci grid'e hizalayin.
• Silgi ile cizimleri silin.
• Geri ve Ileri dugmeleriyle islemleri yonetin.
• Kaydet ile cizimi PNG olarak indirin.

Notlar

• Uygulama tek sayfa uzerinde calisir ve harici kutuphane kullanmaz.
• Kaydetme islemi tarayicinin indirme ozelligi ile cizim.png dosyasi olarak yapilir.
• Grid acikken arka plan rengi secilebilir.

Gelistirme Fikirleri

• Renk paletini genisletme
• Katman destegi ekleme
• Mobil arayuzu iyilestirme
• Cizimleri tarayici depolamasinda saklama
• Sekiller icin kenarlik/dolgu ayri ayarlari ekleme