Rough.js Membuat Grafik Gambar Tangan dengan Canvas & SVG

Sungguh menakjubkan melihat seberapa jauh web telah datang elemen dinamis seperti SVG dalam browser. Anda dapat merancang semuanya animasi khusus untuk Game HTML5 dengan perpustakaan yang tepat.

Salah satu perpustakaan terbaru yang layak diuji adalah Rough.js. Itu adalah skrip generasi grafis gratis saat ini dalam versi beta itu bekerja pada elemen kanvas dan SVG.

Anda dapat membuat ikon khusus, grafik batang, hampir semua yang Anda inginkan dalam kode. Dan, hasil akhirnya mengambil perasaan digambar tangan yang cantik.

Sampai tulisan ini dibuat, Rough.js masih dalam versi beta v0.1, jadi begitu mungkin tidak siap untuk situs web produksi langsung. Tapi itu buktinya standar web berkembang cepat dan kita memasuki zaman di mana hal-hal semacam ini dimungkinkan.

Ambil contoh ini progress bar dihasilkan melalui Rough.js. Jika Anda mengklik “Mulai” tombol Anda akan melihatnya menjalankan animasi khusus bahwa benar-benar terlihat digambar tangan. Itu menggunakan Garis SVG dengan pola yang telah ditentukan untuk menciptakan efek goyah yang terlihat benar-benar alami.

Pada halaman utama GitHub, Anda akan menemukan daftar bagian banyak contoh Rough.js sedang beraksi.

Semua ini datang dengan contoh kode dan seharusnya cukup mudah untuk mengerjakan ulang untuk situs web apa pun. Yang Anda butuhkan hanyalah file skrip Rough.js dan kesabaran untuk mengacaukan JavaScript.

Ini a cuplikan sampel menunjukkan bagaimana caranya buat persegi panjang dalam kode:

 var kasar = RoughCanvas baru (document.getElementById ('myCanvas'), 400, 200); rough.rectangle (10, 10, 200, 200); // x, y, lebar, tinggi 

Cukup sederhana setelah Anda memahami kode tetapi mungkin bukan skrip paling intuitif untuk pemula.

Jika Anda ingin lebih banyak cuplikan kode dan demo contoh lihat beranda Rough.js. Ini adalah tempat yang tepat untuk mulai belajar dan menemukan potongan kode yang dapat Anda ulang.

Juga, jika Anda memiliki pertanyaan atau saran untuk fitur tambahan, Anda dapat mengirim pesan kepada pembuat Rough.js di Twitter @preetster.