Categories: Artikel HTML

Menggambar Graphics Di Html5

Di HTML5 ada elemen CANVAS yang sanggup kita gunakan untuk menggambar graphics, kotak, lingkaran, karakter, dan masih banyak lainnya. Namun, secara konkret untuk melaksanakan semua hal itu tidak hanya CANVAS yang dilibatkan, scripting (umumnya JavaScript) juga wajib disertakan.

Elemen CANVAS didukung oleh IE9 (IE8 dan sebelumnya tidak mendukung), Firefox, Opera, Chrome, dan Safari.

Elemen CANVAS hanya memiliki dua atribut, yaitu WIDTH dan HEIGHT, dimana masing-masing tetapkan lebar dan tinggi dari canvas yang akan dibuat, dalam satuan piksel.

Untuk CANVAS ini coba didahului dengan penulisan menyerupai berikut:

Selanjutnya bagaimana menggambar sebuah bentuk pada CANVAS itu, anda sanggup mengikuti hal di bawah ini dan ini hanya satu contoh:

Temukan ID elemen CANVAS yang dimaksud, dalam pola ini ialah myCanvas.

var canvas = document.getElementById("myCanvas");
Panggil metode getContext(), berikan string ‘2d’ untuk parameter metode ini.

var context = canvas.getContext("2d");
Tetapkan warna penuh ke biru.

context.fillStyle = "rgb(13, 118, 208)";
Gambar persegiempat panjang dengan empat sudut.

context.fillRect(30, 30, 150, 150);
Dan arahan dari no 1 hingga dengan 4 anda tempatkan di dalam fungsi berjulukan drawSquare(). Sehingga menjadi:

function drawSquare(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "rgb(13, 118, 208)"; context.fillRect(30, 30, 150, 150); }
Untuk memanggil fungsi drawSquare() sanggup yang manapun disukai, pola ini contohnya fungsi itu dipanggil saat halaman pertama kali dimuat:

<BODY ONLOAD="drawSquare()">
Output dari pola arahan di atas:

Tambahan: getContext("2d") ialah objek built-in HTML5, beliau memiliki banyak properti dan metode untuk keperluan menggambar pada CANVAS. Pada pola di atas hanya properti fillStyle dan metode fillRect() yang digunakan, untuk lainnya mudah-mudahan akan di bahas pada lain artikel.

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.

Ahmad Code