Cara Sederhana Membuat dan Menggambar Canvas di Blog ~ Trelo-Skato

Tuesday 16 December 2014

Sobat Skato Sekalian, pada postingan yang ke tiga ini saya akan membagikan sebuah tutorial yang saya beri judul Cara sederhana membuat dan menggambar canvas di blog, apa itu canvas? adalah kain yang berlapis cat campur lem, merupakan kain kanvas terbuat dari yang kain tipis sampai kain tebal dan kuat. Bahan ini dipergunakan untuk membuat layar dan terutama dasar lukisan (wikipedia). Tetapi pada tutorial kali ini bukanlah canvas yang sesungguhnya tetapi versi virtual untuk diaplikasikan di internet atau web browsing.

Seandainya sobat blogger tertarik untuk membuatnya, yuk kita ikuti proses pembuatannya di bawah ini:

Ikuti langkah² dibawah ini:
1. Login ke akun blogger sobat
2. Klik Layout atau Tata Letak » Add a Gadget » HTML/JavaScript jika kita ingin meletakannya diluar area postingan.
3. Lalu tambahkan kode HTML berikut ini kedalamnya

<canvas width="500" height="280" id="drawing" style="background: #00080F;" margin-left:200px;>
    Opps ! Your browser does not support for this application
    <br />
    We are So Sorry!
</canvas>
<script>
var skatocanvas   = document.getElementById('drawing') ;
    var ctx = skatocanvas.getContext('2d');
    // baris teks pertama
    ctx.font = '50px Roboto' ;
    ctx.lineWidth = 5 ;
    ctx.strokeStyle = "orange";
    ctx.strokeText("Just For Sample",70,120);
    // baris teks ke dua
    ctx.font = '30px Roboto' ;
    ctx.lineWidth = 1 ;
    ctx.strokeStyle = "white";
    ctx.strokeText("Blog Trelo-Skato Canvas Demo",40,160) ;
    // baris teks ke tiga
    ctx.font = '30px Brush Script MT' ;
    ctx.lineWidth = 4 ;
    ctx.fillStyle = "white";
    ctx.fillText("www.trelo-skato.blogspot.com",110,190) ;
</script>

5. Save
6. Selesai

Demo JSFiddle:

keterangan:

//baris teks pertama adalah baris teks paling atas di canvas dan seterusnya.
ctx.font adalah ukuran dan jenis huruf yang digunakan
ctx.Linewidth adalah ukuran lebar huruf atau angka nya
ctx.strokeStyle adalah jenis warna untuk huruf atau angka
ctx.strokeText adalah isi dari teks kanvas itu sendiri
70,120 adalah posisi x dan y dari teks tersebut
Dan jika sobat ingin menambahkan atau membuatnya di area postingan,
sobat tinggal masukan kode diatas pada HTML mode di area postingan tersebut.

Selamat mencoba salam "skato duo kato".

Demo On Blog