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.
