Browser poluler saat ini tidak semuanya mendukung gambar vektor kecuali Firefox dan Safari dengan fitur Canvas yang ada. Dengan sedikit trik kita dapat menggambar garis dan lingkaran pada halaman HTML. Namun perlu diingat bahwa trik ini bukanlah cara yang baik bahkan bisa dibilang buruk. Saya hanya ingin menunjukkan saja kalo dengan cara ini kita bisa menggambar garis dan lingkaran.
Pada dasarnya trik ini menggunakan beberapa elemen DIV berukuran 1x1 piksel yang dirender sedemikian rupa sehingga membentuk garis dan lingkaran. DIV harus diisi dengan elemen lain supaya terlihat rapi. Jika DIV tanpa anak, ukuran elemen tersebut tidak bisa diatur menjadi 1x1 piksel. Untuk mengatasi masalah ini diisikan elemen IMG dengan gambar transparan sebesar 1x1 piksel.
Berikut ini adalah script yang digunakan untuk menggambar garis dan lingkaran dengan JavaScript dan jQuery.
<html>
<head>
<title>Drawing</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
line(50,30, 100, 150);
circle(110,110, 100);
});
function line(x1, y1, x2, y2) {
c = $(document.body);
var dx = Math.abs(x2-x1);
var dy = Math.abs(y2-y1);
var d = Math.max(dx, dy);
var i=0;
for(i=0; i < d; i++) {
var img = $(document.createElement('img')).attr('src', 'blank.gif');
var div = $(document.createElement('div')).width(1).height(1).css({'background-color': '#f00', position: 'absolute', left: Math.min(x1,x2)+(i*dx/d), top: Math.min(y1,y2)+(i*dy/d) });
div.append(img);
c.append(div);
}
}
function circle(x, y, r) {
c = $(document.body);
var l = 2 * Math.PI * r;
var i=0;
for(i=0; i < l * (1+((10-Math.log(r+1))/10)); i++) {
var x2 = r * Math.sin(360 * i/l);
var y2 = r * Math.cos(360 * i/l);
var img = $(document.createElement('img')).attr('src', 'blank.gif');
var div = $(document.createElement('div')).width(1).height(1).css({'background-color': '#f00', position: 'absolute', left: x+x2, top: y+y2 });
div.append(img);
c.append(div);
}
}
</script>
</head>
<body>
</div>
</body>
</html>
Semoga tulisan ini bisa dijadikan wawasan alternatif untuk menggambar dalam HTML. Saya tidak menyarankan trik ini untuk dipake dalam aplikasi sebenarnya. Gunakan Canvas (untuk Firefox dan Safari) atau embeded object (Silverlight/Flash) untuk menggambar vektor yang lebih baik.