Transliterasi Aksara Bali



Aplikasi di atas adalah aplikasi untuk transliterasi Aksara Bali. Mungkin dalam berbagai hal aplikasi ini masih memerlukan pembenahan.
Komentar, masukan, saran, kritik dan sebagainya dari anda sangat diharapkan. Selamat mencoba.



Update : Aplikasi ini sudah dibuat dalam versi Android, lebih update dari yang ada di blog ini. Untuk pengguna android silahkan install dari Play Store, cari aplikasi dengan keword : com.agusmade.aksarabali
atau klik link ini https://play.google.com/store/apps/details?id=com.agusmade.aksarabali.



Update Lagi (April 2020): Mohon maaf, Aplikasi berbasis web ini sudah tidak jalan, karena tempat hosting dropbox yang tadinya digunakan untuk menampung font tidak mengijinkan CORS lagi.

Namun bagi pengguna Android, saya sudah buat aplikasi Android yang lebih mutakhir, support unicode, jadi bisa copas ke aplikasi lain. Bisa konversi Aksara Bali ke Tulisan Latin, bisa bikin kartu ucapan menggunakan Aksara Bali, dan berbagai fitur lainnya.
Temukan di playstore, gunakan keword: com.agusmade.anaksarabali atau klik link ini https://play.google.com/store/apps/details?id=com.agusmade.anaksarabali.



Terima kasih



Tutorial HTML5 Canvas (Fill dan Gradient)

Sebagai lanjutan dari tulisan sebelumnya masih mengenai Canvas dalam HTML5, berikut kita membahas mengenai Fill dan Gradasi (Gradient). Tentu kita hanya menggunakan fungsi2 bawaan HTML5 untuk mengelola canvas. Hasil akhir dari pelajaran kita hari ini kira2 seperti gambar berikut :

HTML5 Canvas Fill and Gradient

Langkah2nya pembuatannya masih sama mulai dari mempersiapkan halaman HTML yang berisi tag canvas dalam <body></body> seperti tag berikut :

<canvas id="canvasku" width="300" height="300"></canvas>

See the Pen Canvas Basic (Fill & Gradient) by Agus Made (@agusmade) on CodePen.

Selanjutnya rujuk ke file JS atau tambahkan tag <script></script> yang berisi code berikut

var canvas=document.getElementById('canvasku');
var context=canvas.getContext('2d');

/* SOLID */
//kotak 1
context.beginPath();
context.rect(10, 10, 80, 40);
context.fillStyle = 'lime';
context.fill();

//kotak 2
context.beginPath();
context.rect(100, 10, 80, 40);
context.strokeStyle = 'green';
context.stroke();

//kotak 3
context.beginPath();
context.rect(190, 10, 80, 40);
context.fillStyle = 'lime';
context.strokeStyle = 'green';
context.fill();
context.stroke();

/* LINEAR GRADIENT */
//kotak 4
context.beginPath();
var grdf = context.createLinearGradient(10, 3, 10+80, 3); //x1,y1,x2,y2
grdf.addColorStop(0, '#234');   
grdf.addColorStop(1, '#23e');
context.rect(10, 60, 80, 40);
context.fillStyle = grdf;
context.fill();

//kotak 5
context.beginPath();
var grdl = context.createLinearGradient(3, 60, 3, 100);
grdl.addColorStop(0, '#865');   
grdl.addColorStop(1, '#f65');
context.rect(100, 60, 80, 40);
context.strokeStyle = grdl;
context.stroke();

//kotak 6
context.beginPath();
var grdl = context.createLinearGradient(3, 60, 3, 100);
grdl.addColorStop(0, '#865');   
grdl.addColorStop(1, '#f65');
var grdf = context.createLinearGradient(190, 3, 190+80, 3);
grdf.addColorStop(0, '#234');   
grdf.addColorStop(1, '#23e');
context.rect(190, 60, 80, 40);
context.fillStyle = grdf;
context.fill();
context.strokeStyle = grdl;
context.lineWidth = 5;
context.stroke();

//garis bantu
circles([[3, 60],[3, 100]]);
lines([[3, 60],[3, 100]],grdl);
circles([[190, 3],[190+80, 3]]);
lines([[190, 3],[190+80, 3]],grdf);

/* RADIAL GRADIENT */
//lingkaran 1
context.beginPath();
var grdf = context.createRadialGradient(40, 140, 0, 40, 140, 30); //circle1x,circle1y,circle1radius,circle2x,circle2y,circle2radius,
grdf.addColorStop(0, '#234');   
grdf.addColorStop(1, '#23e');
context.arc(40, 140, 30, 0, 2 * Math.PI, false); //lingkaran
context.fillStyle = grdf;
context.fill();

//lingkaran 2
context.beginPath();
var grdf = context.createRadialGradient(110, 140, 20, 110, 140, 30);
grdf.addColorStop(0, '#234');
grdf.addColorStop(1, '#23e');
context.arc(110, 140, 30, 0, 2 * Math.PI, false);
context.fillStyle = grdf;
context.fill();

//lingkaran 3
context.beginPath();
var grdf = context.createRadialGradient(180, 140, 0, 180, 140, 50);
grdf.addColorStop(0, '#234');
grdf.addColorStop(1, '#23e');
context.arc(180, 140, 30, 0, 2 * Math.PI, false);
context.fillStyle = grdf;
context.fill();

//lingkaran 4
context.beginPath();
var grdf = context.createRadialGradient(250, 110, 0, 250, 140, 30);
grdf.addColorStop(0, '#234');
grdf.addColorStop(1, '#23e');
context.arc(250, 140, 30, 0, 2 * Math.PI, false);
context.fillStyle = grdf;
context.fill();

/* KOMBINASI */
//lingkaran besar
context.beginPath();
var grdlin = context.createLinearGradient(0, 235-65, 0, 235+65);
grdlin.addColorStop(0, '#23e');   
grdlin.addColorStop(1, '#234');
context.arc(145, 235, 65, 0, 2 * Math.PI, false);
context.fillStyle = grdlin;
context.fill();
context.beginPath();
var grdf = context.createRadialGradient(145+20, 235+80, 0, 145+20, 235+80, 130);
grdf.addColorStop(0, 'rgba(255,255,255,0.7)');
grdf.addColorStop(1, 'rgba(255,255,255,0)');
context.arc(145, 235, 65, 0, 2 * Math.PI, false);
context.fillStyle = grdf;
context.fill();
context.beginPath();
var grdf = context.createRadialGradient(145-10, 235-40, 0, 145-10, 235-40, 90);
grdf.addColorStop(0, 'rgba(255,255,255,0.9)');
grdf.addColorStop(1, 'rgba(255,255,255,0)');
context.arc(145, 235, 65, 0, 2 * Math.PI, false);
context.fillStyle = grdf;
context.fill();

/* fungsi tambahan */
function circles(a,color){
  color=color||'rgba(0,0,0,0.5)';
  for (var i=0; i<a.length; i++ ){
    context.beginPath();
    context.arc(a[i][0], a[i][1], 3, 0, 2 * Math.PI, false);
    context.fillStyle = color;
    context.fill();
  }
}

function lines(a,color){
  color=color||'rgba(0,0,0,0.5)';
  context.beginPath();
  context.moveTo(a[0][0],a[0][1]);
  for (var i=1; i<a.length; i++ ){
    context.lineTo(a[i][0],a[i][1]);
  }
  context.lineWidth = 1;
  context.strokeStyle = color;
  context.stroke();
}

See the Pen Canvas Basic (Fill & Gradient) by Agus Made (@agusmade) on CodePen.

Maka hasilnya akan menjadi seperti gambar di atas, atau hasil berikut :

See the Pen Canvas Basic (Fill & Gradient) by Agus Made (@agusmade) on CodePen.

Maaf saya masih males ngasi panduan bertele2 dalam kata2, karna dalam soure code sudah disertai ketarangan tidap bagiannya. Kalo ada yang belum jelas, atau salah, atau usul atau protes, silahkan tulis komen.
Moga pikiran yang baik senantiasa menyertai kita.
Makasih


Follow:

More

Label

3D (1) blogger (1) Canvas (2) cerita pribadi (4) cms (1) coreldraw (1) delphi (6) freeware (1) GLScene (1) gps (1) HTML5 (2) humor (1) library (1) mysql (4) OLE/DDE (1) online tools (2) oop (2) OpenGL (1) photoshop (2) php (1) PJU (2) project (4) referensi (1) software (9) tamzbackup (1) tutorial dasar (8) zeos (3)

Copyright 2014 .: web blog nya agus made :.
Designed by Template Trackers | alxmedia.se