Rough.js Canvas & SVG ile Çizilmiş Grafikler Yapıyor

Web'in ne kadar ilerlediğini görmek şaşırtıcı dinamik elemanlar gibi tarayıcı içi SVG'ler. Her şeyi tasarlayabilirsiniz özel animasyonlar için HTML5 oyunları doğru kütüphanelerle.

Test etmeye değer en yeni kütüphanelerden biri Rough.js. Bu bir ücretsiz grafik oluşturma komut dosyası şu anda beta tuval ve SVG öğeleri üzerinde çalışıyor.

Özel simgeler, çubuk grafikler ve kodda istediğiniz herhangi bir şeyi oluşturabilirsiniz. Ve son sonuç muhteşem çizilmiş bir duygu alır.

Bu yazı itibariyle Rough.js hala v0.1 beta’da. canlı yapım web sitesine hazır olmayabilir. Ama bu bir kanıt. web standartları hızla ilerliyor ve biz bu tür şeylerin mümkün olduğu bir çağa giriyoruz.

Örneğin bu al ilerleme çubuğu Rough.js ile oluşturuldu. Eğer tıklarsan “başla” düğmesini fark edeceksiniz özel bir animasyon çalıştırır o gerçekten elle çizilmiş görünüyor. Kullanıyor Önceden tanımlanmış desenlere sahip SVG hatları gerçekten doğal görünen titrek bir etki yaratmak için.

GitHub ana sayfasında bir bölüm listesi bulacaksınız birçok Rough.js örneği çalışıyor.

Bütün bunlar kod örnekleri ile gel ve olmalı herhangi bir web sitesi için yeniden çalışmak oldukça kolay. İhtiyacınız olan tek şey Rough.js komut dosyası ve JavaScript ile uğraşmak için biraz sabır.

İşte bir örnek pasajı nasıl yapıldığını gösteren kod içinde bir dikdörtgen oluşturmak:

 var kaba = yeni RoughCanvas (document.getElementById ('myCanvas'), 400, 200); kaba dikdörtgen (10, 10, 200, 200); // x, y, genişlik, yükseklik 

Kodu bir kez anladığınızda oldukça basit ama yeni başlayanlar için muhtemelen en sezgisel senaryo.

Daha fazla kod snippet'i ve örnek demolar istiyorsanız Rough.js ana sayfasına göz atın. Öğrenmeye başlamak ve yeniden işleyebileceğiniz kod parçacıklarını bulmak için mükemmel bir yer.

Ayrıca, ek özellikler için sorularınız veya önerileriniz varsa, Rough.js oluşturucusunu Twitter @preetster'da mesajlaşabilirsiniz..