HTML Canvas dan HTML SVG || BLC Telkom Klaten

 

A. PENDAHULUAN
    a. Pengertian

    HTML Canvas adalah elemen yang ada di HTML5 yang berguna untuk menggambar grafik, image, dan teks. Jadi, HTML Canvas merupakan elemen yang bisa digambar dengan kode-kode.

    HTML SVG adalah singkatan dari (Scalable Vector Grapichs), SVG digunakan untuk mendefinisikan grafik untuk web.

    b. Latar Belakang Masalah

    Di karenakan belum mengerti dan memahami langkah tutorial agar bisa menguasai HTML, maka dari itu saya mempelajari dan mempraktikkan langkah-langkahnya di w3schools.

B. MAKSUD DAN TUJUAN

    Dapat menguasai HTML dan tujuannya setelah menguasai HTML bisa masuk ke jenjang berikutnya untuk bisa membangun sebuah template yang nantinya akan di buat website.

C. BATASAN DAN RUANG LINGKUP PEKERJAAN

    W3Schools

• HTML Canvas
• HTML SVG
  

 

D. TARGET DAN HASIL YANG DIHARAPKAN

    Mengetahui dan memahami HTML Canvas dan HTML SVG.

E. METODE PELAKSANAAN

• Membaca
• Memahami
• Latihan Tryit Yourself
  

 

F. ALAT DAN BAHAN

• Laptop
• Internet
  

 

G. TARGET WAKTU

    8 Jam (08.00-16.00 WIB)

H. TAHAPAN PELAKSANAAN

    HTML Canvas

• Canvas Examples
  

    Kanvas adalah area persegi panjang pada halaman HTML. Secara default, kanvas tidak memiliki batas dan tidak ada konten.

    Contoh codingannya akan seperti ini :

<canvas id="adibcanvas" width="200" height="100" style="border: 1px solid#000000;">

</canvas>

    Outputnya akan seperti ini :

• Draw a Line 

    Tambahkan javascript untuk menambahkan garis miring pada kotak/persegi panjang tersebut.

    Mari kita coba dalam kode :

<script>

var c = document.getElementById("adibcanvas");

var ctx = c.getContext("2d");

ctx.moveTo(0,0)

ctx.lineTo(200,100)

ctx.stroke();

</script>

    Outputnya akan seperti ini :

• Draw a Circle

<script>

var c = document.getElementById("adib");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

</script> 

    Output akan seperti ini :

• Draw a Text

<script>

var c = document.getElementById("aunur");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.fillText("Blogger Adib",10,50);

</script>

    Outputnya akan seperti ini :

•  Stroke Text

<script>

var c = document.getElementById("rohim");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.strokeText("Blogger Adib",10,50);

</script>

    Hasil Outputnya akan seperti ini :

• Draw Linear Gradient

<script>

var c = document.getElementById("sofyan");

var ctx = c.getContext("2d");

// Membuat Gradient

var grd = ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"blue");

grd.addColorStop(1,"white");

// isi dengan gradient

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

</script>

    Outputnya :

    HTML SVG

    HTML SVG adalah singkatan dari (Scalable Vector Grapichs), SVG digunakan untuk mendefinisikan grafik untuk web.

• SVG Circle

<svg width="100" height="100">

<circle cx="50" cy="50" r="40"

stroke="green" stroke-width="4" fill="yellow">

</svg>

 

I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA

    Pada saat SVG Circle tidak dapat di tampilkan di browser

    Penyelesaian :

    Kurang teliti tinggal memberi "-"

J. KESIMPULAN

    Jadi, HTML Canvas merupakan elemen yang bisa digambar dengan kode-kode.

K. REFERENSI

• https://www.w3schools.com/html/html5_canvas.asp