Mengganti Warna Kanvas dengan Javascript

Pada HTML 5 terdapat fungsi baru yang bernama Canvas, dengan Canvas kita bisa lebih mudah mempercantik tampilan, warna kanvas bisa ditentukan dengan menggunakan CSS.

Tetapi pada artikel ini kita akan coba bahas cara merubah warna canvas menggunakan Javascript agar tampilan web lebih interaktif

Untuk Anda yang ingin mengetahui caranya atau ingin tahu lebih lanjut apa itu canvas, silahkan salin kode di kotak di bawah ini ke dalam file HTML Anda

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pilih Warna</title>
</head>
<style type="text/css">

.canvas{
background-color:#663300;

}

.style1 {
 font-size: 24px;
 font-weight: bold;
}
</style>

function gantiWarna(kode){
var kanvas=document.getElementById("canvas");
kanvas.getContext("2d").fillStyle=kode;

kanvas.getContext("2d").fillRect(0, 0, kanvas.width, kanvas.height);

}

</script>
<p class="style1">Memilih Warna Kanvas dengan Javascript <p></p>
<p><canvas class="canvas" id="canvas" height="240" width="320"></canvas><p></p>
<p> <p></p>
<p>
  <input type="button" name="Submit" value="Merah" onclick="gantiWarna('#FF0000')" />
  <input type="button" name="Submit2" value="Kuning" onclick="gantiWarna('#FFFF00')" />
  <input type="button" name="Submit3" value="Hijau" onclick="gantiWarna('#00FF00')" />
  <input type="button" name="Submit4" value="Biru" onclick="gantiWarna('#0066FF')" />
  <input type="button" name="Submit42" value="Hitam" onclick="gantiWarna('#000000')" />
  <input type="button" name="Submit43" value="Putih" onclick="gantiWarna('#FFFFFF')" />
  <input type="button" name="Submit44" value="Cokelat" onclick="gantiWarna('#663300')" />
<p></p>

Jika sudah, save file HTML tersebut lalu jalankan di browser. Anda akan melihat tampilan seperti ini

Anda bisa mengganti warna canvas menggunakan tombol yang berada di bawahnya.

Pelajari skripnya, jika Anda ingin membahas skrip tersebut bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawah artikel ini ^_^

2 komentar:

Unknown23 Maret 2012 pukul 23.49
kalo di dalam ada tulisan / foto / gambar / video bissa gak ... ?
BalasHapus
Balasan
Anhar Tasman25 Maret 2012 pukul 11.59
Bisa Mas Dodol.

Semua tergantung kreatifitas programmer yang bersangkutan.
BalasHapus
Balasan

Tambahkan komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

Bahas Komputer

Mengganti Warna Kanvas dengan Javascript

2 komentar:

Jasa Pembuatan Website, Aplikasi Android dan Aplikasi iOS

Follow

Programmer Konsultan

Pembaca Setia

Arsip Blog

Popular Posts

Menu

Laporkan Penyalahgunaan

Cari Blog Ini

Label

Featured Posts

Featured Posts

Site Links

Follow

Featured Posts

About

Flickr Imags

Bahas Komputer

Mengganti Warna Kanvas dengan Javascript

You Might Also Like

2 komentar:

Jasa Pembuatan Website, Aplikasi Android dan Aplikasi iOS

Follow

Programmer Konsultan

Pembaca Setia

Arsip Blog

Popular Posts

Menu

Laporkan Penyalahgunaan

Cari Blog Ini

Label

Featured Posts

Featured Posts

Site Links

Follow

Featured Posts

About

Flickr Imags