kode javascript

Cara menggunakan create element img javascript

The Image object represents an HTML

HTML5 membawa banyak elemen baru yang menggantikan tugas Flash dalam browser. Salah satunya adalah canvas.

Apa itu Canvas?

Dalam dunia nyata, canvas sering digunakan untuk menggambar dan melukis. Biasanya menggunakan pensil dan cat.

Dalam pemrograman, canvas adalah elemen yang bisa digambar dengan kode.

Canvas adalah elemen baru di HTML5 untuk menggambar [render] grafik, image, dan teks.

Cara Membuat Canvas di HTML

Canvas dapat dibuat dengan tag



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

3, jangan lupa juga untuk memberikan ukuran tinggi dan lebarnya.

Kita berikan sedikit style



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

4 untuk membuat garis tepi.

Selanjutnya kita harus menggunakan DOM API untuk memanipulasi canvas, biasanya dilakukan seperti ini:

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];

Fungsi



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

5 untuk memilih elemen HTML dengan id



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

Selanjutnya variabel



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

7 [konteks] adalah objek dari canvas yang bisa kita manfaatkan untuk menggambar.

Contoh kode lengkapnya:



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

Sekarang kita punya canvas kosong yang siap untuk digambar…

Siapkan imajinasimu dan mulailah menggamabar dengan kode 😄.

Menggambar di Canvas

Jika pada dunia nyata kita menggunakan pensil untuk menggambar, maka di canvas HTML5 menggunakan objek



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

Objek



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

7 bisa kita anggap sebagai pensil. Objek ini memiliki beberapa method untuk menggambar di canvas seperti

ctx.fillRect[x,y,1,1];

ctx.fillRect[x,y,1,1];

ctx.fillRect[x,y,1,1];

2, dsb.

Nah untuk menggambar dengan method-method tersebut, kita harus menentukan koordinat titik

ctx.fillRect[x,y,1,1];

3 dan

ctx.fillRect[x,y,1,1];

4-nya.

Karena canvas terdiri dari kumpulan piksel yang membentuk diagram kartesius terbalik.

Cara Menggambar Titik pada Canvas

Pertama kita akan coba menggambar sebuah titik.

Dalam seni rupa, titik adalah bagian terkecil dari sebuah objek yang menempati suatu ruang. Sedangkan dalam ilmu matematika geometri, titik adalah objek

ctx.fillRect[x,y,1,1];

5-dimensi yang tidak memiliki panjang, lebar, dan tinggi.

Tapi dalam komputer titik adalah ukuran 1 piksel dari layar.

Untuk menggambar titik pada canvas, kita dapat menggunakan method

ctx.fillRect[x,y,1,1];

0 dengan ukuran 1x1 piksel.

ctx.fillRect[x,y,1,1];

Variabel

ctx.fillRect[x,y,1,1];

3 dan

ctx.fillRect[x,y,1,1];

4 kita ganti dengan nilai koordinatnya, misalkan kita ingin menggambar titik pada koordinat

ctx.fillRect[x,y,1,1];

ctx.fillRect[10,10,1,1];

Mari kita coba dalam kode:



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            // gambar titik pada koordinat [10,10] dengan ukuran 1x1 px
            ctx.fillRect[10,10,1,1];

Hasilnya:

[Lakukan pembesaran [zoom in] sampai 500% untuk melihatnya]

Cara Menggambar Garis pada Canvas

Garis adalah kumpulan dari titik-titik yang saling terhubung. Ada empat fungsi yang kita butuhkan untuk membuat garis.

```
ctx.fillRect[10,10,1,1];
```
0 untuk membuat garis baru.
```
ctx.fillRect[10,10,1,1];
```
1 untuk menentukan titik awal.
```
ctx.fillRect[10,10,1,1];
```
2 untuk menentukan titik akhir.
```
ctx.fillRect[10,10,1,1];
```
3 untuk menggambar garisnya.

Mari kita coba…

Misalkan kita ingin menggambar garis dari titik

ctx.fillRect[x,y,1,1];

9 sampai titik

ctx.fillRect[10,10,1,1];



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            ctx.beginPath[]; // mulai menggmabar
            ctx.moveTo[10,10];
            ctx.lineTo[50,50];
            ctx.stroke[];

Hasilnya:

Cara Menggambar Persegi pada Canvas

Ada tiga fungsi yang digunakan untuk menggambar persegi pada canvas:

```
ctx.fillRect[10,10,1,1];
```
6 persegi dengan garis [outline] saja.
```
ctx.fillRect[10,10,1,1];
```
7 persegi dengan polesan warna [default-nya hitam].
```
ctx.fillRect[10,10,1,1];
```
8 persegi transparan untuk menghapus.

Seperti biasa, kita harus memberikan titik koordinat

ctx.fillRect[x,y,1,1];

3 dan

ctx.fillRect[x,y,1,1];

4. Sementara nilai



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            // gambar titik pada koordinat [10,10] dengan ukuran 1x1 px
            ctx.fillRect[10,10,1,1];

1 dan



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            // gambar titik pada koordinat [10,10] dengan ukuran 1x1 px
            ctx.fillRect[10,10,1,1];

2 untuk lebar dan tingginya.

Mari kita coba:



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            ctx.strokeRect[10,10,100,100];
            ctx.fillRect[120,10,100,100];

Hasilnya:

Lalu bagaimana contoh yang



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            // gambar titik pada koordinat [10,10] dengan ukuran 1x1 px
            ctx.fillRect[10,10,1,1];

Method



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            // gambar titik pada koordinat [10,10] dengan ukuran 1x1 px
            ctx.fillRect[10,10,1,1];

3 digunakan untuk menghapus gambar.

Contohnya: Kita ingin menhapus pada titik



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            // gambar titik pada koordinat [10,10] dengan ukuran 1x1 px
            ctx.fillRect[10,10,1,1];

5 sampai



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            // gambar titik pada koordinat [10,10] dengan ukuran 1x1 px
            ctx.fillRect[10,10,1,1];

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];

ctx.strokeRect[10,10,100,100];
ctx.clearRect[5,5,20,20];
ctx.fillRect[120,10,100,100];

Maka hasilnya:

Cara Menggambar Segitiga pada Canvas

Segitiga tidak memiliki method tesendiri seperti persegi [rectangle]. Namun, bukan berarti kita tidak bisa menggambarnya.

Segitiga dapat digambar menggunakan fungsi/method dari garis.

Contohnya:

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];


ctx.beginPath[]; // mulai menggmabar
ctx.moveTo[100, 100]; // titik awal
ctx.lineTo[100, 300]; // titik ke-2
ctx.lineTo[300, 300]; // titik ke-3
ctx.closePath[]; // titik ke-3 ke titik awal

// buat garis
ctx.stroke[];

Maka hasilnya:

Perhatikan: di sana ada fungsi



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            // gambar titik pada koordinat [10,10] dengan ukuran 1x1 px
            ctx.fillRect[10,10,1,1];

7, tugasnya untuk menggambar garis dari titik terakhir ke titik awal.

Pertama gambar garis dari titik awal ke titik ke-2:

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];

Lalu buat garis dari titik ke-2 menuju ke titik 3:

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];

Terakhir, buat garis dari titik ke-3 menuju ke titik awal:

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];

Maka jadilah segitiga… 😄

Cara Menggambar Lingkaran pada Canvas

Lingkaran digambar dengan method

ctx.fillRect[x,y,1,1];

1. Method ini memiliki 5 parameter yang wajib diberikan.

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];

Paramter:

ctx.fillRect[x,y,1,1];

3 untuk menentukan koordinat

ctx.fillRect[x,y,1,1];

ctx.fillRect[x,y,1,1];

4 untuk menentukan koordinat

ctx.fillRect[x,y,1,1];



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            ctx.beginPath[]; // mulai menggmabar
            ctx.moveTo[10,10];
            ctx.lineTo[50,50];
            ctx.stroke[];

3 untuk menentukan jari-jari lingkaran;



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            ctx.beginPath[]; // mulai menggmabar
            ctx.moveTo[10,10];
            ctx.lineTo[50,50];
            ctx.stroke[];

4 sudut awal dengan satuan radian [

ctx.fillRect[x,y,1,1];

5 radian dimulai dari arah jam 3];



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            ctx.beginPath[]; // mulai menggmabar
            ctx.moveTo[10,10];
            ctx.lineTo[50,50];
            ctx.stroke[];

6 sudut akhir dengan satuan radian;



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            ctx.beginPath[]; // mulai menggmabar
            ctx.moveTo[10,10];
            ctx.lineTo[50,50];
            ctx.stroke[];

7 [opsional] untuk menentukan arah menggambar lingkaran:

jika diberikan nilai



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            ctx.beginPath[]; // mulai menggmabar
            ctx.moveTo[10,10];
            ctx.lineTo[50,50];
            ctx.stroke[];

8 maka akan menggambar berlawanan dengan arah jarum jam.

jika



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            ctx.beginPath[]; // mulai menggmabar
            ctx.moveTo[10,10];
            ctx.lineTo[50,50];
            ctx.stroke[];

9 maka akan menggambar searah dengan jarum jam.

Nilai default-nya adalah



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            ctx.beginPath[]; // mulai menggmabar
            ctx.moveTo[10,10];
            ctx.lineTo[50,50];
            ctx.stroke[];

Paham…?

Mari kita coba:

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];

Hasilnya:

Penjelasan:

Pertama kita mulai menggmabar dengan



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            ctx.strokeRect[10,10,100,100];
            ctx.fillRect[120,10,100,100];

1, gunakan selalu fungsi ini untuk mulai menggmabar.

Kedua menggmabar lingkaran dengan fungsi

ctx.fillRect[x,y,1,1];

1 dengan parameter yang ditentukan. Lingkaran digambar pada titik



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            ctx.strokeRect[10,10,100,100];
            ctx.fillRect[120,10,100,100];

3 dengan ukuran jari-jari



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            ctx.strokeRect[10,10,100,100];
            ctx.fillRect[120,10,100,100];

4 piksel.

Mulai digambar dari arah jam 3 [

ctx.fillRect[x,y,1,1];

5 radian] menuju kembali ke arah jam 3 [



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            ctx.strokeRect[10,10,100,100];
            ctx.fillRect[120,10,100,100];

6 radian].

Gampang kan?

Cara Meyisipkan Teks pada Canvas

Ada dua fungsi untuk membuat teks:



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            ctx.strokeRect[10,10,100,100];
            ctx.fillRect[120,10,100,100];

7 untuk teks dengan garis luar [outline] saja.

```
ctx.fillRect[x,y,1,1];
```
2 untuk teks dengan warna [default hitam].

Fungsi tersebut memiliki tiga parameter yang wajib diberikan:

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];

Mari kita coba:

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];

Hasilnya:

Ada pengisian atribut



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            ctx.strokeRect[10,10,100,100];
            ctx.fillRect[120,10,100,100];

9 pada kode di atas.

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];

Fungsinya untuk menentukan jenis font serta ukurannya. Nilainya seperti nilai atribut



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

            ctx.strokeRect[10,10,100,100];
            ctx.fillRect[120,10,100,100];

9 pada CSS.

Cara Me-render Gambar pada Canvas

Terakhir, kita akan coba me-render gambar ke canvas. Untuk melakukannya, kita membutuhkan sebuah gambar dan menggunakan fungsi

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];

ctx.strokeRect[10,10,100,100];
ctx.clearRect[5,5,20,20];
ctx.fillRect[120,10,100,100];

1 untuk merender-nya ke canvas.

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];

Kita akan menggunakan gambar dari W3Schools: img_the_scream.jpg.

Pertama silahkan buat elemen

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];

ctx.strokeRect[10,10,100,100];
ctx.clearRect[5,5,20,20];
ctx.fillRect[120,10,100,100];

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];

Kemudian buat tombol render:



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

Terakhir membuat fungsi

var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext["2d"];

ctx.strokeRect[10,10,100,100];
ctx.clearRect[5,5,20,20];
ctx.fillRect[120,10,100,100];



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

Kode lengkapnya:



    
        
        Tutorial HTML 5 Canvas
    
    

        
        

        
            var canvas = document.getElementById["myCanvas"];
            var ctx = canvas.getContext["2d"];

Hasilnya:

Mudah bukan…?

Pemrograman Game Berbasis HTML5

Ilmu di atas belumlah cukup untuk membuat game berbasis HTML5 dari nol, karena hanya pengenalan saja. Kita harus pelajari ilmu yang lainnya, seperti:

Membuat objek secara acak di Canvas
Cara Membuat Animasi di Canvas;
Cara Membuat Gravitasi dan Menerapkan Elemen Fisika Lainnya;
Cara Memutar Audio untuk Game;
Logika Game dan sistem Poin;
Logika Kode untuk Benturan [Collision];
dan sebagainya.

Bila kamu tidak ingin membuat semua itu dari nol, gunakanlah Game Engine. Karena sudah dibuatkan di sana dan kita tinggal pakai saja.

Daftar Game Engine berbasis HTML5 dapat dilihat di: html5gameengine.com

Pemrograman Grafis atau Grafika Komputer

Nah, buat kamu yang tertarik ke pemrograman grafis, bisa coba-coba ide eksperimen berikut:

Membuat Aplikasi Painting Berbasis HTML5;
Membuat Photoshop sendiri;
Menerapkan algoritma grafika komputer seperti algoritma membuat garis;
Pengolahan Citra dan Computer Vision;
Membuat Diagram Interaktif;
Me-render Gambar dari Webcam ke Canvas
dan sebagainya.

Akhir Kata…

Terima kasih sudah menyimak artikel ini sampai akhir. Selamat belajar dan berimajinasi dengan kode.

Selanjutnya silahkan pelajari tentang “ Cara Menggambar Menggunakan Perulangan dan Fungsi Random pada Canvas”.

Apa itu Canvas?

Cara Membuat Canvas di HTML

Menggambar di Canvas

Cara Menggambar Titik pada Canvas

Cara Menggambar Garis pada Canvas

Cara Menggambar Persegi pada Canvas

Cara Menggambar Segitiga pada Canvas

Cara Menggambar Lingkaran pada Canvas

Cara Meyisipkan Teks pada Canvas

Cara Me-render Gambar pada Canvas

Pemrograman Game Berbasis HTML5

Pemrograman Grafis atau Grafika Komputer

Akhir Kata…

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề