Penggunaan Canvas pada HTML
 |
| Ilustrasi Canvas HTML |
Contoh:
<!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>
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>
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>
- Cara Mudah Mendeskripsikan Objek Menggunakan Tag Aside pada HTML5 [klik]
- Cara Membuat Teks Bidireksional Menggunakan Tag Tag Bdi HTML5 [klik]
- 2 Contoh Cara Memberikan Informasi Tambahan Menggunakan Tag Details HTML5 [klik]
- Cara Sederhana Menambahkan Kotak Dialog pada HTML5 [klik]
- 2 Contoh Cara Mudah Mengatur Figcaption HTML5 [klik]
- Cara Mudah Menambahkan Ilustrasi atau Foto Menggunakan Tag Figure HTML5 [klik]
- 2 Contoh Sederhana Cara Mendefinisikan Footer pada HTML5 [klik]
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