KELOMPOK :
1. GARELLIA REZA PAHLEVI ( A12.2007.02599 )
2. AGUS KURNIAWAN ( A12.2007.02654 )
3. RUDY PRASTIYO ( A12.2006.02128 )
=========================================================================
CANVAS :
Browser yang mendukung untuk menjalankan elemen ini yaitu : mozilla firefox, opera mini, google chrome, safari lalu internet explorer versi 8 kebawah masih belum men-support canvas, namun IE
memiliki tekhnologi khusus microsoft bernama VML,yg bisa berfungsi
seperti canvas namun untuk menggunakannya perlu menambahkan library java
script ex canvas.js
Kegunannya :
canvas merupakan elemen penanda (tag) yang memungkinkan kita untuk membuat suatu gambar dinamis dalam bentuk 2 dimensi yang telah di definisikan sebelumnya melalui sebuah baris kode canvas berfungsi sebagai media gambar website dengan dikombinasikan bersama javascript.
Contoh Code penggunaan elemen Canvas :
canvas merupakan elemen penanda (tag) yang memungkinkan kita untuk membuat suatu gambar dinamis dalam bentuk 2 dimensi yang telah di definisikan sebelumnya melalui sebuah baris kode canvas berfungsi sebagai media gambar website dengan dikombinasikan bersama javascript.
Contoh Code penggunaan elemen Canvas :
<canvas id="myCanvas" width="385" height="80"
style="border:1px solid #000000;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"yellow");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(5,5,372,70);
ctx.font="42px chiller";
ctx.strokeText("GARELLIA REZA PAHLEVI",10,50);
</script>
---------------------------------------------------------------------------------------------------------------------
Berikut screen shot yang saya ambil dari tiga browser :
=========================================================================
DRAG/DROP :
Browser yang mendukung untuk menjalankan elemen ini yaitu ; Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop. lalu Safari 5.1.2 masih belum men-support elemen Drag/Drop
Kegunaanya :
bagian dari HTML5 yang standard dan merupakan feature yang biasa digunakan, ketika kita “grab” suatu obyek dan menggesernya ke lokasi yang berbeda
Browser yang mendukung untuk menjalankan elemen ini yaitu ; Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop. lalu Safari 5.1.2 masih belum men-support elemen Drag/Drop
Kegunaanya :
bagian dari HTML5 yang standard dan merupakan feature yang biasa digunakan, ketika kita “grab” suatu obyek dan menggesernya ke lokasi yang berbeda
Contoh Code penggunaan elemen Drag/Drop :
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img.gif" draggable="true"
ondragstart="drag(event)" width="402" height="108">
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
Berikut screen shot yang saya ambil dari tiga browser :
