Contoh Jam Analog Dengan Canvas | Buku Catatan si Ugi

Home › Blogs Tutorial › Canvas › Widgets › Contoh Jam Analog Dengan Canvas


Jam Analog dengan gaya Jam Tangan ini merupakan demonstrasi tambahan Demo sebelumnya, yaitu Membuat Jam Tangan Menggunakan Canvas, dimana didalam moreskin.js terdiri dari beberapa theme tambahan dengan gaya Jam seperti Demo berikut ini:




Demonstrasi




Seperti telah saya jelaskan sebelumnya, bahwa untuk menampilkan Jam Tangan ini, kita menggunakan syntax seperti berikut:

<canvas id="Nama_ID" class="CoolClock:Nama_Skin:radio"></canvas>

<canvas id="JamTangan" class="CoolClock:chunkySwissOnBlack:150"></canvas>

Dimana JamTangan: adalah merupakan Nama_ID, chunkySwissOnBlack: adalah Nama_Skin dan 150 adalah Radio atau ukuran.

Sedangkan untuk menggunakan model jam yang berbeda desain seperti demontrasi diatas, kita cukup mengganti Nama_Skin sesuai dengan desain yang kita inginkan, seperti misalnya; swissRail, chunkySwiss, chunkySwissOnBlack dan lain-lain.

Untuk Daftar Nama_Skin dapat kita lihat dalam moreskin.js, yang dapat anda download disini, atau menggunakan file yang sudah saya sediakan berikut ini:
Complete Code Show Hide
Kode Lengkap moreskin.js
CoolClock.config.skins = {

    swissRail: {
        outerBorder:      { lineWidth: 2, radius: 95, color: "black", alpha: 1 },
        smallIndicator:   { lineWidth: 2, startAt: 88, endAt: 92, color: "black", alpha: 1 },
        largeIndicator:   { lineWidth: 4, startAt: 79, endAt: 92, color: "black", alpha: 1 },
        hourHand:         { lineWidth: 8, startAt: -15, endAt: 50, color: "black", alpha: 1 },
        minuteHand:       { lineWidth: 7, startAt: -15, endAt: 75, color: "black", alpha: 1 },
        secondHand:       { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: 1 },
        secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 1 }
    },

    chunkySwiss: {
        outerBorder:      { lineWidth: 4, radius: 97, color: "black", alpha: 1 },
        smallIndicator:   { lineWidth: 4, startAt: 89, endAt: 93, color: "black", alpha: 1 },
        largeIndicator:   { lineWidth: 8, startAt: 80, endAt: 93, color: "black", alpha: 1 },
        hourHand:         { lineWidth: 12, startAt: -15, endAt: 60, color: "black", alpha: 1 },
        minuteHand:       { lineWidth: 10, startAt: -15, endAt: 85, color: "black", alpha: 1 },
        secondHand:       { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 },
        secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 }
    },

    chunkySwissOnBlack: {
        outerBorder:      { lineWidth: 4, radius: 97, color: "white", alpha: 1 },
        smallIndicator:   { lineWidth: 4, startAt: 89, endAt: 93, color: "white", alpha: 1 },
        largeIndicator:   { lineWidth: 8, startAt: 80, endAt: 93, color: "white", alpha: 1 },
        hourHand:         { lineWidth: 12, startAt: -15, endAt: 60, color: "white", alpha: 1 },
        minuteHand:       { lineWidth: 10, startAt: -15, endAt: 85, color: "white", alpha: 1 },
        secondHand:       { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 },
        secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 }
    },

    fancy: {
        outerBorder:      { lineWidth: 5, radius: 95, color: "green", alpha: 0.7 },
        smallIndicator:   { lineWidth: 1, startAt: 80, endAt: 93, color: "black", alpha: 0.4 },
        largeIndicator:   { lineWidth: 1, startAt: 30, endAt: 93, color: "black", alpha: 0.5 },
        hourHand:         { lineWidth: 8, startAt: -15, endAt: 50, color: "blue", alpha: 0.7 },
        minuteHand:       { lineWidth: 7, startAt: -15, endAt: 92, color: "red", alpha: 0.7 },
        secondHand:       { lineWidth: 10, startAt: 80, endAt: 85, color: "blue", alpha: 0.3 },
        secondDecoration: { lineWidth: 1, startAt: 30, radius: 50, fillColor: "blue", color: "red", alpha: 0.15 }
    },

    machine: {
        outerBorder:      { lineWidth: 60, radius: 55, color: "#dd6655", alpha: 1 },
        smallIndicator:   { lineWidth: 4, startAt: 80, endAt: 95, color: "white", alpha: 1 },
        largeIndicator:   { lineWidth: 14, startAt: 77, endAt: 92, color: "#dd6655", alpha: 1 },
        hourHand:         { lineWidth: 18, startAt: -15, endAt: 40, color: "white", alpha: 1 },
        minuteHand:       { lineWidth: 14, startAt: 24, endAt: 100, color: "#771100", alpha: 0.5 },
        secondHand:       { lineWidth: 3, startAt: 22, endAt: 83, color: "green", alpha: 0 },
        secondDecoration: { lineWidth: 1, startAt: 52, radius: 26, fillColor: "#ffcccc", color: "red", alpha: 0.5 }
    },

    simonbaird_com: {
        hourHand:         { lineWidth: 80, startAt: -15, endAt: 35,  color: 'magenta', alpha: 0.5 },
        minuteHand:       { lineWidth: 80, startAt: -15, endAt: 65,  color: 'cyan', alpha: 0.5 },
        secondDecoration: { lineWidth: 1,  startAt: 40,  radius: 40, color: "#fff", fillColor: 'yellow', alpha: 0.5 }
    },

    // by bonstio, http://bonstio.net
    classic/*was gIG*/: {
        outerBorder:      { lineWidth: 185, radius: 1, color: "#E5ECF9", alpha: 1 },
        smallIndicator:   { lineWidth: 2, startAt: 89, endAt: 94, color: "#3366CC", alpha: 1 },
        largeIndicator:   { lineWidth: 4, startAt: 83, endAt: 94, color: "#3366CC", alpha: 1 },
        hourHand:         { lineWidth: 5, startAt: 0, endAt: 60, color: "black", alpha: 1 },
        minuteHand:       { lineWidth: 4, startAt: 0, endAt: 80, color: "black", alpha: 1 },
        secondHand:       { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: .85 },
        secondDecoration: { lineWidth: 3, startAt: 0, radius: 2, fillColor: "black", color: "black", alpha: 1 }
    },

    modern/*was gIG2*/: {
        outerBorder:      { lineWidth: 185, radius: 1, color: "#E5ECF9", alpha: 1 },
        smallIndicator:   { lineWidth: 5, startAt: 88, endAt: 94, color: "#3366CC", alpha: 1 },
        largeIndicator:   { lineWidth: 5, startAt: 88, endAt: 94, color: "#3366CC", alpha: 1 },
        hourHand:         { lineWidth: 8, startAt: 0, endAt: 60, color: "black", alpha: 1 },
        minuteHand:       { lineWidth: 8, startAt: 0, endAt: 80, color: "black", alpha: 1 },
        secondHand:       { lineWidth: 5, startAt: 80, endAt: 85, color: "red", alpha: .85 },
        secondDecoration: { lineWidth: 3, startAt: 0, radius: 4, fillColor: "black", color: "black", alpha: 1 }
    },

    simple/*was gIG3*/: {
        outerBorder:      { lineWidth: 185, radius: 1, color: "#E5ECF9", alpha: 1 },
        smallIndicator:   { lineWidth: 10, startAt: 90, endAt: 94, color: "#3366CC", alpha: 1 },
        largeIndicator:   { lineWidth: 10, startAt: 90, endAt: 94, color: "#3366CC", alpha: 1 },
        hourHand:         { lineWidth: 8, startAt: 0, endAt: 60, color: "black", alpha: 1 },
        minuteHand:       { lineWidth: 8, startAt: 0, endAt: 80, color: "black", alpha: 1 },
        secondHand:       { lineWidth: 5, startAt: 80, endAt: 85, color: "red", alpha: .85 },
        secondDecoration: { lineWidth: 3, startAt: 0, radius: 4, fillColor: "black", color: "black", alpha: 1 }
    },

    // by securephp
    securephp: {
        outerBorder:      { lineWidth: 100, radius: 0.45, color: "#669900", alpha: 0.3 },
        smallIndicator:   { lineWidth: 2, startAt: 80, endAt: 90 , color: "green", alpha: 1 },
        largeIndicator:   { lineWidth: 8.5, startAt: 20, endAt: 40 , color: "green", alpha: 0.4 },
        hourHand:         { lineWidth: 3, startAt: 0, endAt: 60, color: "black", alpha: 1 },
        minuteHand:       { lineWidth: 2, startAt: 0, endAt: 75, color: "black", alpha: 1 },
        secondHand:       { lineWidth: 1, startAt: -10, endAt: 80, color: "blue", alpha: 0.8 },
        secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "blue", color: "red", alpha: 1 }
    },

    Tes2: {
        outerBorder:      { lineWidth: 4, radius: 95, color: "black", alpha: 0.5 },
        smallIndicator:   { lineWidth: 1, startAt: 10, endAt: 50 , color: "#66CCFF", alpha: 1 },
        largeIndicator:   { lineWidth: 8.5, startAt: 60, endAt: 70, color: "#6699FF", alpha: 1 },
        hourHand:         { lineWidth: 5, startAt: -15, endAt: 60, color: "black", alpha: 0.7 },
        minuteHand:       { lineWidth: 3, startAt: -25, endAt: 75, color: "black", alpha: 0.7 },
        secondHand:       { lineWidth: 1.5, startAt: -20, endAt: 88, color: "red", alpha: 1 },
        secondDecoration: { lineWidth: 1, startAt: 20, radius: 4, fillColor: "blue", color: "red", alpha: 1 }
    },

    Lev: {
        outerBorder:      { lineWidth: 10, radius: 95, color: "#CCFF33", alpha: 0.65 },
        smallIndicator:   { lineWidth: 5, startAt: 84, endAt: 90, color: "#996600", alpha: 1 },
        largeIndicator:   { lineWidth: 40, startAt: 25, endAt: 95, color: "#336600", alpha: 0.55 },
        hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 0.9 },
        minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 0.85 },
        secondHand:       { lineWidth: 1, startAt: 0, endAt: 85, color: "black", alpha: 1 },
        secondDecoration: { lineWidth: 2, startAt: 5, radius: 10, fillColor: "black", color: "black", alpha: 1 }
    },

    Sand: {
        outerBorder:      { lineWidth: 1, radius: 70, color: "black", alpha: 0.5 },
        smallIndicator:   { lineWidth: 3, startAt: 50, endAt: 70, color: "#0066FF", alpha: 0.5 },
        largeIndicator:   { lineWidth: 200, startAt: 80, endAt: 95, color: "#996600", alpha: 0.75 },
        hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 0.9 },
        minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 0.85 },
        secondHand:       { lineWidth: 1, startAt: 0, endAt: 85, color: "black", alpha: 1 },
        secondDecoration: { lineWidth: 2, startAt: 5, radius: 10, fillColor: "black", color: "black", alpha: 1 }
    },

    Sun: {
        outerBorder:      { lineWidth: 100, radius: 140, color: "#99FFFF", alpha: 0.2 },
        smallIndicator:   { lineWidth: 300, startAt: 50, endAt: 70, color: "black", alpha: 0.1 },
        largeIndicator:   { lineWidth: 5, startAt: 80, endAt: 95, color: "black", alpha: 0.65 },
        hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 0.9 },
        minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 0.85 },
        secondHand:       { lineWidth: 1, startAt: 0, endAt: 90, color: "black", alpha: 1 },
        secondDecoration: { lineWidth: 2, startAt: 5, radius: 10, fillColor: "black", color: "black", alpha: 1 }
    },

    Tor: {
        outerBorder:      { lineWidth: 10, radius: 88, color: "#996600", alpha: 0.9 },
        smallIndicator:   { lineWidth: 6, startAt: -10, endAt: 73, color: "green", alpha: 0.3 },
        largeIndicator:   { lineWidth: 6, startAt: 73, endAt: 100, color: "black", alpha: 0.65 },
        hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 1 },
        minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 1 },
        secondHand:       { lineWidth: 1, startAt: -73, endAt: 73, color: "black", alpha: 0.8 },
        secondDecoration: { lineWidth: 2, startAt: 5, radius: 10, fillColor: "black", color: "black", alpha: 1 }
    },

    Cold: {
        outerBorder:      { lineWidth: 15, radius: 90, color: "black", alpha: 0.3 },
        smallIndicator:   { lineWidth: 15, startAt: -10, endAt: 95, color: "blue", alpha: 0.1 },
        largeIndicator:   { lineWidth: 3, startAt: 80, endAt: 95, color: "blue", alpha: 0.65 },
        hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 1 },
        minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 1 },
        secondHand:       { lineWidth: 1, startAt: 0, endAt: 85, color: "black", alpha: 0.8 },
        secondDecoration: { lineWidth: 5, startAt: 30, radius: 10, fillColor: "black", color: "black", alpha: 1 }
    },

    Babosa: {
        outerBorder:      { lineWidth: 100, radius: 25, color: "blue", alpha: 0.25 },
        smallIndicator:   { lineWidth: 3, startAt: 90, endAt: 95, color: "#3366CC", alpha: 1 },
        largeIndicator:   { lineWidth: 4, startAt: 75, endAt: 95, color: "#3366CC", alpha: 1 },
        hourHand:         { lineWidth: 4, startAt: 0, endAt: 60, color: "black", alpha: 1 },
        minuteHand:       { lineWidth: 3, startAt: 0, endAt: 85, color: "black", alpha: 1 },
        secondHand:       { lineWidth: 12, startAt: 75, endAt: 90, color: "red", alpha: 0.8 },
        secondDecoration: { lineWidth: 3, startAt: 0, radius: 4, fillColor: "black", color: "black", alpha: 1 }
    },

    Tumb: {
        outerBorder:      { lineWidth: 105, radius: 5, color: "green", alpha: 0.4 },
        smallIndicator:   { lineWidth: 1, startAt: 93, endAt: 98, color: "green", alpha: 1 },
        largeIndicator:   { lineWidth: 50, startAt: 0, endAt: 89, color: "red", alpha: 0.14 },
        hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 1 },
        minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 1 },
        secondHand:       { lineWidth: 1, startAt: 0, endAt: 85, color: "black", alpha: 0.8 },
        secondDecoration: { lineWidth: 5, startAt: 50, radius: 90, fillColor: "black", color: "black", alpha: 0.05 }
    },

    Stone: {
        outerBorder:      { lineWidth: 15, radius: 80, color: "#339933", alpha: 0.5 },
        smallIndicator:   { lineWidth: 2, startAt: 70, endAt: 90, color: "#FF3300", alpha: 0.7 },
        largeIndicator:   { lineWidth: 15, startAt: 0, endAt: 29, color: "#FF6600", alpha: 0.3 },
        hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 1 },
        minuteHand:       { lineWidth: 3, startAt: 0, endAt: 75, color: "black", alpha: 1 },
        secondHand:       { lineWidth: 1, startAt: 0, endAt: 85, color: "black", alpha: 0.8 },
        secondDecoration: { lineWidth: 5, startAt: 50, radius: 90, fillColor: "black", color: "black", alpha: 0.05 }
    },

    Disc: {
        outerBorder:      { lineWidth: 105, radius: 1, color: "#666600", alpha: 0.2 },
        smallIndicator:   { lineWidth: 1, startAt: 58, endAt: 95, color: "#669900", alpha: 0.8 },
        largeIndicator:   { lineWidth: 6, startAt: 25, endAt: 35, color: "#666600", alpha: 1 },
        hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 1 },
        minuteHand:       { lineWidth: 3, startAt: 0, endAt: 75, color: "black", alpha: 1 },
        secondHand:       { lineWidth: 1, startAt: -75, endAt: 75, color: "#99CC00", alpha: 0.8 },
        secondDecoration: { lineWidth: 5, startAt: 50, radius: 90, fillColor: "#00FF00", color: "green", alpha: 0.05 }
    },

    // By Yoo Nhe
    watermelon: {
        outerBorder:      { lineWidth: 100, radius: 1.7, color: "#d93d04", alpha: 5 },
        smallIndicator:   { lineWidth: 2, startAt: 50, endAt: 70, color: "#d93d04", alpha: 5 },
        largeIndicator:   { lineWidth: 2, startAt: 45, endAt: 94, color: "#a9bf04", alpha: 1 },
        hourHand:         { lineWidth: 5, startAt: -20, endAt: 80, color: "#8c0d17", alpha: 1 },
        minuteHand:       { lineWidth: 2, startAt: -20, endAt: 80, color: "#7c8c03", alpha: .9 },
        secondHand:       { lineWidth: 2, startAt: 70, endAt: 94, color: "#d93d04", alpha: .85 },
        secondDecoration: { lineWidth: 1, startAt: 70, radius: 3, fillColor: "red", color: "black", alpha: .7 }
    }
};

Lihat tutorial Membuat Jam Analog Dengan Canvas disini



sumber: vagabundia

0 komentar:

Post a Comment



Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan