07 canvas

1,063 views
997 views

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,063
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
84
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

07 canvas

  1. 1. Canvas Pertemuan ke-7 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  2. 2. <canvas>  Format tag canvas cukup sederhana: <canvas id=”canvasku” width=”360” height=”240”> <canvas>  Script untuk browser yang belum mendukung canvas <canvas id=”canvasku” width=”360” height=”240”> <p>belum mendukung canvas? Gunakan img:</p> <img src=”mpus.jpg” alt=”mpus lucu”> <canvas> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  3. 3. JavaScript  Menggambar canvas dilakukan oleh javascript. Cukup referensikan unsur canvas dan kontesknya var canvas =  document.getElementById(canvasku); var context = canvas.getContext(2d); Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  4. 4. Menggambar dengan kode  Menggambar empat persegi panjang  Garis berwarna merah context.strokeStyle = #990000;  Format gambar empat persegi panjang strokeRect(kiri, atas, lebar, tinggi)  Contoh: context.strokeRect(20, 30, 100, 50) 20 piksel dari kiri, 30 piksel dari atas buat segi empat dengan panjang 100 piksel dan tinggi 50 piksel Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  5. 5. Gambar 2 Kotak <!DOCTYPE html> <html>   <head><title>Simple Drawings</title></head>   <body>      <canvas id="my_canvas" width="150" height="150">        Fallback content here      </canvas>            <script type="text/javascript" charset="utf­8">        var canvas = document.getElementById(my_canvas);        if (canvas.getContext){          var context = canvas.getContext(2d);                       context.fillStyle = "rgb(200,0,0)";             context.fillRect (10, 10, 100, 100);             context.fillStyle = "rgb(0,200,0)";             context.fillRect (20, 20, 100, 100);                     }else{          // tampilkan sesuatu di sini        }      </script>      </body> Materi kuliah Desain Web, Teknik Informatika FTUP </html>Disusun oleh Adi Wahyu Pribadi
  6. 6. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  7. 7. Gambar Garis ( Path )      <script type="text/javascript" charset="utf­8">        var canvas = document.getElementById(my_canvas);        if (canvas.getContext){          var context = canvas.getContext(2d);                       context.strokeStyle = "rgb(200,0,0)";             context.lineWidth = 2;             context.beginPath();             context.moveTo(0, 0);              context.lineTo(100, 100);             context.stroke();              context.closePath();                     }else{          // tampilkan sesuatu di sini        }      </script> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  8. 8. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  9. 9. Tugas  Buka developer.mozilla.org/en/canvas_tutorial  Buat 7 Kelompok untuk presentasi  Dasar Canvas  Menggambar suatu bentuk  Menggunakan image yang sudah jadi  Menerapkan style dan warna  Transformasi  Menggabungkan  Dasar animasi Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi

×