Menampilkan citra atau gambar di HTML berbeda dengan menampilkannya di canvas pada HTML5. Sintaks untuk menampilkan citra pada HTML cukup sederhana, seperti pada source code di bawah ini :
<img src="lopi0003.jpg" alt="Katak" height="42" width="42" />
Sedangkan untuk menampilkan citra pada canvas di HTML5 sangat berbeda dengan source code di atas. Source dari citra dideklarasikan pada bagian javascript, selain itu citra perlu dideklarasikan pada sebuah variabel (pada source code di bawah yaitu citra). Setelah itu citra dipanggil dengan fungsi drawImage(citra, posisiX, posisiY, lebarCitra, tinggiCitra). Sintaks full untuk memanggil citra pada canvas HTML5 terdapat pada source code di bawah ini :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>HTML5</title>
</head>
<body>
<canvas id="canvas" width="450" height="450"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var citra = new Image();
citra.onload = function(){
context.drawImage(citra, 0, 0, 450, 350);
};
citra.src = "lopi0003.jpg";
};
Gambar di bawah ini adalah citra yang ditampilkan dengan canvas HTML5.
No comments:
Post a Comment