Rough.js Membuat Genggaman Tangan Grafik dengan Kanvas & SVG
Sungguh mengagumkan untuk melihat sejauh mana web telah datang unsur dinamik seperti dalam SVGs pelayar. Anda boleh merancang semuanya dari animasi tersuai kepada Permainan HTML5 dengan perpustakaan yang betul.
Salah satu pustaka terbaru yang bernilai ujian ialah Rough.js. Ianya adalah skrip generasi grafik percuma kini dalam beta itu berfungsi pada kanvas dan elemen SVG.
Anda boleh membina ikon tersuai, graf bar, apa sahaja yang anda mahukan dalam kod. Dan, keputusan akhir mengambil perasaan yang cantik.
Sehingga penulisan ini, Rough.js masih dalam v0.1 beta, jadi ia mungkin tidak bersedia untuk laman web pengeluaran langsung. Tetapi itu adalah bukti bahawa piawaian web sedang berkembang pesat dan kami memasuki usia di mana perkara semacam ini mungkin.
Ambil contoh ini bar kemajuan dihasilkan melalui Rough.js. Jika anda klik “Mulakan” butang yang anda akan perasan menjalankan animasi tersuai itu benar-benar kelihatan ditarik tangan. Ia menggunakan Garis SVG dengan corak yang telah ditetapkan untuk mewujudkan kesan goyangan yang kelihatan benar-benar semula jadi.
Pada halaman GitHub utama, anda akan menemui senarai seksyen banyak contoh Rough.js dalam tindakan.
Semua ini datang dengan sampel kod dan sepatutnya cukup mudah untuk dilakukan semula untuk mana-mana laman web. Apa yang anda perlukan adalah fail skrip Rough.js dan sesetengah kesabaran untuk mengawal JavaScript.
Inilah a cuplikan sampel menunjukkan cara untuk buat segi empat tepat dalam kod:
var kasar = RoughCanvas baru (document.getElementById ('myCanvas'), 400, 200); rough.rectangle (10, 10, 200, 200); // x, y, lebar, ketinggian Cukup mudah apabila anda memahami kod itu tetapi mungkin bukan skrip yang paling intuitif untuk pemula.
Jika anda mahukan lebih banyak coretan kod dan demo sampel lihat laman utama Rough.js. Ia adalah tempat yang sempurna untuk mula belajar dan untuk mencari coretan kod yang anda boleh lakukan semula.
Selain itu, jika anda mempunyai soalan atau cadangan untuk ciri-ciri tambahan, anda boleh menghantar mesej pencipta Rough.js di Twitter @preetster.
