nongkingopi.com – HTML5 Canvas adalah elemen yang kuat yang memungkinkan Anda untuk menggambar grafik, gambar, dan animasi secara dinamis di . Ia menyediakan antarmuka yang dapat diprogram untuk membuat konten interaktif dan menarik secara visual.
Dalam artikel ini, kita akan menjelajahi berbagai aspek dalam bekerja dengan HTML5 Canvas, termasuk deteksi posisi mouse, ukuran dan resolusi kanvas, rotasi, menyimpan kanvas sebagai file gambar, menambahkan elemen kanvas ke halaman web, kemampuan dan penggunaan kanvas, bekerja dengan kanvas di luar layar, dan menciptakan contoh “Hello World” sederhana.
BACA JUGA : Apa itu HTML? Lihat Sejarah, Fungsi dan Cara kerjanya
1. Posisi Mouse Relatif terhadap Kanvas
Untuk mendeteksi posisi mouse relatif terhadap kanvas, Anda dapat menggunakan pendengar acara mousemove dan mengurangi posisi kiri dan atas kanvas dari koordinat X dan Y klien. Berikut ini contohnya:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";
canvas.addEventListener("mousemove", function(e) {
var cRect = canvas.getBoundingClientRect(); // Mendapatkan posisi CSS dan lebar/tinggi
var canvasX = Math.round(e.clientX - cRect.left); // Mengurangi posisi 'kiri' kanvas
var canvasY = Math.round(e.clientY - cRect.top); // dari posisi X/Y untuk membuat (0,0) menjadi sudut kiri atas kanvas
ctx.clearRect(0, 0, canvas.width, canvas.height); // Menghapus kanvas
ctx.fillText("X: " + canvasX + ", Y: " + canvasY, 10, 20); // Menampilkan posisi mouse
});2. Ukuran dan Resolusi Kanvas
Ukuran kanvas ditentukan oleh properti lebar dan tinggi CSS-nya, sedangkan resolusinya ditentukan oleh atribut lebar dan tinggi. Jika tidak ditentukan, kanvas akan menggunakan ukuran default 300 piksel lebar dan 150 piksel tinggi. Untuk memastikan rasio aspek piksel kanvas tetap utuh, penting untuk mengatur baik ukuran CSS maupun resolusinya. Berikut ini contohnya:
canvas {
width: 1000px;
height: 1000px;
}<canvas id="my-canvas" width="1000" height="1000"></canvas>3. Rotasi
Metode rotate(r) pada konteks 2D memungkinkan Anda untuk memutar kanvas dengan sudut yang ditentukan dalam radian mengelilingi pusatnya. Berikut ini contohnya:
HTML
<canvas id="canvas" width="240" height="240" style="background-color: #808080;"></canvas>
<button type="button" onclick="rotate_ctx();">Putar konteks</button>JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#FFF";
ctx.fillText("Halo Dunia", ox, oy);
function rotate_ctx() {
ctx.translate(ox, oy); // Terjemahkan ke pusat kanvas
ctx.rotate((Math.PI / 180) * 15); // Memutar sebesar 15 derajat
ctx.fillText("Halo Dunia", 0, 0); // Menggambar teks yang telah diputar
ctx.translate(-ox, -oy); // Kembalikan ke posisi asli
}4. Menyimpan Kanvas sebagai File Gambar
Anda dapat menyimpan kanvas sebagai file gambar menggunakan metode canvas.toDataURL(), yang mengembalikan URI data untuk data gambar kanvas. Berikut ini contohnya:
HTML
<canvas id="canvas" width="240" height="240" style="background-color: #808080;"></canvas>
<p></p>
<a id="download" download="myImage.jpg" href="" onclick="download_img(this);">Unduh ke myImage.jpg</a>JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#800";
ctx.fillRect(ox / 2, oy / 2, ox, oy);
function download_img(el) {
var imageURI = canvas.toDataURL("image/jpg");
el.href = imageURI;
}5. Menambahkan Elemen HTML5 Canvas ke Halaman Web
Untuk menambahkan elemen HTML5 Canvas ke halaman web, Anda dapat menggunakan tag <canvas>. Ini adalah elemen HTML5 yang didukung oleh sebagian besar browser modern (Internet Explorer 9+). Berikut ini contohnya:
<!doctype html>
<html>
<head>
<style>
body { background-color: white; }
#canvasHtml5 { border: 1px solid red; }
#canvasJavascript { border: 1px solid blue; }
</style>
<script>
window.onload = function() {
var canvas = document.createElement('canvas');
canvas.id = 'canvasJavascript';
document.body.appendChild(canvas);
};
</script>
</head>
<body>
<canvas id="canvasHtml5"></canvas>
</body>
</html>6. Indeks Kemampuan & Penggunaan HTML5 Canvas
HTML5 Canvas menawarkan berbagai kemampuan dan dapat digunakan dalam berbagai cara. Beberapa fitur dan penggunaan utamanya meliputi:
- Menggambar gambar, teks, garis, dan kurva.
- Menerapkan opsi gaya yang luas seperti lebar goresan, warna, gradien, keburaman, dan bayangan.
- Membuat aplikasi cat/sketsa, game interaktif, grafik, diagram, pengeditan gambar mirip Photoshop, dan konten web yang mencolok.
- Memanipulasi warna gambar pada tingkat piksel, mendeteksi dan mengisi bagian gambar, menerapkan filter gambar, menggabungkan gambar, dan lainnya.
- Bekerja dengan video, mengekspor konten kanvas sebagai gambar, dan menjawab pertanyaan tentang konten gambar.
- Membuat animasi dengan menggambar ulang elemen kanvas pada posisi yang berbeda untuk menciptakan ilusi gerakan.
- Memanfaatkan akselerasi GPU untuk kinerja gambar yang cepat.
7. Kanvas di Luar Layar
Untuk bekerja dengan kanvas di luar layar, Anda dapat membuat elemen kanvas, memperoleh konteks 2D-nya, dan melakukan berbagai operasi tanpa menampilkan kanvas pada halaman. Berikut ini contohnya:
function createCanvas(width, height) {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
return canvas;
}
var myCanvas = createCanvas(256, 256);
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "biru";
ctx.fillRect(0, 0, 256, 256);Untuk menyederhanakan penggunaan kanvas di luar layar, Anda dapat melekatkan konteks kanvas ke kanvas itu sendiri:
function createCanvas(width, height) {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
return canvas;
}
var myCanvas = createCanvas(256, 256);
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "biru";
ctx.fillRect(0, 0, 256, 256);8. Hello World
Berikut ini adalah contoh sederhana “Hello World!” menggunakan HTML5 Canvas:
HTML
<canvas id="canvas" width="300" height="100" style="background-color: #808080;"></canvas>JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "34px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World", 150, 50);Result
BACA JUGA : Variabel Scope dalam PHP
Semoga ini membantu Anda untuk memulai dengan HTML5 Canvas dan menjelajahi kemampuannya!
