Penggunaan Canvas pada HTML
Pengenalan Canvas dalam HTML
- Kontrol Penuh dan Kustomisasi Tinggi: Elemen <canvas> memberikan kontrol penuh kepada pengembang untuk menggambar grafis. Dengan menggunakan JavaScript, pengguna dapat membuat dan mengubah grafis sesuai keinginan. Ini memungkinkan kustomisasi tinggi dalam desain dan interaksi dengan grafis.
- Grafis Interaktif dan Animasi yang Dinamis: Canvas memungkinkan pembuatan grafis interaktif yang bereaksi terhadap input pengguna. Hal ini memungkinkan pembuatan animasi yang halus dan responsif, menghasilkan pengalaman pengguna yang lebih menarik dan dinamis.
- Performa yang Baik: Dalam hal kinerja, Canvas sering kali lebih unggul daripada beberapa metode grafis lainnya. Penggambaran grafis secara langsung di tingkat piksel memungkinkan kinerja yang lebih baik dalam menghadirkan visual yang kompleks dan dinamis.
- Grafis 2D dan 3D: Selain menggambar grafis 2D, Canvas juga mendukung rendering 3D dengan teknologi seperti WebGL. Ini memungkinkan pembuatan grafis yang lebih realistis dan kompleks, membuka pintu bagi pengembang untuk mengeksplorasi desain yang lebih canggih.
- Dukungan Cross-Browser yang Baik: Mayoritas peramban web utama mendukung elemen <canvas>, yang memastikan konsistensi dalam tampilan dan fungsionalitas di berbagai platform. Ini membuat penggunaan Canvas menjadi pilihan yang handal untuk pengembangan web lintas peramban.
- Fleksibilitas dalam Penggunaan Data: Canvas memungkinkan penggunaan data yang dinamis untuk menghasilkan grafis yang berbeda-beda. Data seperti data sensor, data pengguna, atau data waktu nyata dapat diintegrasikan dengan mudah ke dalam elemen Canvas untuk visualisasi yang tepat.
<!DOCTYPE html>
<html>
<body>
<canvas
id="myCanvas"
width="400"
height="200"
style="border:2px solid #000000;">
</canvas>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas
id="myCanvas"
width="400"
height="200"
style=
"border:2px solid #d3d3d3;">
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(200,100,50,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas
id="myCanvas"
width="600"
height="200"
style=
"border:1px solid #d3d3d3;">
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("ElfanMauludi",170,50);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas
id="myCanvas"
width="400"
height="200"
style=
"border:2px solid #d3d3d3;">
Browser tidak support tag canvas HTML5.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"grey");
ctx.fillStyle = grd;
ctx.fillRect(50,50,300,80);
</script>
</body>
</html>
Contoh: Menggambar Lukisan pada Canvas.
<!DOCTYPE html>
<html>
<body>
<p>
Image to use:
</p>
<img
id="scream"
src="http://www.theartstory.org/images20/works/van_gogh_vincent_7.jpg"
alt="VAN GOGH"
width="100"
height="200">
<p>
Canvas to fill:
</p>
<canvas
id="myCanvas"
width="150"
height="250"
style="border:1px solid #d3d3d3;">
</canvas>
<p>
<button onclick="myCanvas()">
Click untuk mencoba
</button>
</p>
<script>
function myCanvas()
{
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,0,0);}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas
id="myCanvas"
width="500"
height="250">
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.shadowBlur = 20;
ctx.shadowColor = "yellow";
ctx.fillStyle = "red";
ctx.fillRect(30, 20, 100, 80);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas
id="myCanvas"
width="300"
height="150;">
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(100, 20, 100, 50);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas
id="myCanvas"
width="300"
height="150;">
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(10, 10, 100, 50);
ctx.translate(80, 90);
ctx.fillRect(10, 10, 100, 50);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas
id="myCanvas"
width="300"
height="150">
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "grey";
ctx.fillRect(0, 0, 250, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 250, 100);
</script>
</body>
</html>
Membuat Animasi pada HTML Canvas
JavaScript membantu mensimulasikan animasi terbaik pada Canvas HTML5. Dua method penting pada JavaScript yang dapat digunakan untuk mensimulasikan animasi gambar pada canvas:- setInterval(callback, time): Method ini secara berulang mengeksekusi runtutan kode yang diberikatan pada waktu tertentu.
- setTimeout(callback, time): Method ini mengeksekusi runtutan kode hanya sekali pada waktu tertentu.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var pattern= new Image();
function animate()
{
pattern.src =
'https://www.reproduction-gallery.com/catalogue/uploads/1463472974_large-image_pablopicassowomanfacingtotheright1934lg.jpg';
setInterval(drawShape, 100);
}
function drawShape()
{
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(20,20,20,20)';
ctx.strokeStyle = 'rgba(0,153,255,0.4)';
ctx.save();
ctx.translate(150,150);
var time = new Date();
ctx.rotate( ((2*Math.PI)/6)*time.getSeconds()
+ ( (2*Math.PI)/6000)*time.getMilliseconds() );
ctx.translate(0,28.5);
ctx.drawImage(pattern,-3.5,-3.5);
ctx.restore();
}
</script>
</head>
<body
onload="animate();">
<canvas
id="mycanvas"
width="400"
height="400">
</canvas>
</body>
</html>
- Tidak Ada Struktur Objek: Canvas pada HTML tidak menyimpan elemen sebagai objek yang dapat dimanipulasi secara independen. Semua elemen yang digambar di atas kanvas merupakan gambar raster (bitmap) dan tidak dapat diubah strukturnya setelah digambar. Ini berarti tidak ada cara bawaan untuk mengakses elemen tertentu secara langsung di atas kanvas untuk memanipulasinya.
- Tidak Mendukung Retina Display dan Responsif: Canvas menggambar grafik dalam piksel mutlak, bukan dalam vektor. Akibatnya, saat grafik diperbesar pada layar Retina atau perangkat dengan resolusi tinggi, hasilnya mungkin terlihat buram atau kehilangan kualitas. Selain itu, karena sifat piksel mutlak, mengubah ukuran kanvas tidak secara otomatis menyesuaikan konten di dalamnya, sehingga membuatnya sulit untuk membuat elemen canvas responsif.
- Aksesibilitas Terbatas: Karena konten yang digambar di atas kanvas adalah elemen grafis, teks di dalamnya tidak dapat diakses oleh teknologi pembaca layar dengan mudah. Hal ini dapat menghambat aksesibilitas bagi pengguna dengan kebutuhan khusus, seperti pengguna tunanetra atau pengguna yang mengandalkan bantuan teknologi pembaca layar untuk mengakses konten web.
- Kinerja Terbatas pada Grafis yang Rumit: Ketika harus menangani gambar atau animasi yang sangat kompleks, performa Canvas bisa menjadi masalah. Pembuatan grafik yang rumit dan pengolahan animasi dalam waktu nyata dapat menuntut sumber daya yang signifikan dari perangkat pengguna, terutama pada perangkat dengan spesifikasi rendah atau keterbatasan daya pemrosesan.
- Keterbatasan Fungsionalitas Bawaan: Canvas pada dasarnya adalah "kertas kosong" dimana pengembang harus membuat segalanya dari awal. Tidak seperti elemen lain dalam HTML, seperti SVG (Scalable Vector Graphics), yang memiliki elemen bawaan untuk menggambar bentuk geometris, Canvas membutuhkan lebih banyak kode untuk membuat elemen-elemen ini dari nol.
5 komentar untuk "Penggunaan Canvas pada HTML"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Apa fungsi tag canvas pada html?
BalasHapusTag < canvas > pada html digunakan untuk menggambar grafik, fly, atau script yang umumnya Javascript. Tag < canvas > bersifat transparan, dan hanya merupakan wadah untuk pembuatan grafik. User harus menggunakan skrip tertentu untuk bisa benar-benar membuat sebuah grafik yang bagus.
HapusCanvas merupakan elemen HTMl yang dapat digunakan untuk menggambar grafik melalui skrip, yang biasanya digunakan untuk menggambar grafik, menggabungkan foto, atau membuat animasi sederhana.
HapusManakah yang lebih baik, antara Canvas dan SVG pada html?
BalasHapusSVg merupakan singkatan dari scalable vector graphics, dimana SVG digunakan untuk mendefinisikan grafik seperti kotak, lingkaran, teks, dan lain sebagainya. SVG memberikan performa yang lebih baik dengan jumlah object yang lebih sedikit atau bentuk permukaan yang lebih besar. Sedangkan Canvas pada HTML memberikan kinerja yang lebih baik dengan permukaan yang lebih kecil atau jumlah object yang lebih banyak.
Hapus