Jom Belajar Buat Grafik Vektor di dalam HTML !!!(Genius Corner Siri 10)

Tajuk: Grafik Vektor di dalam HTML

Genius Corner Siri 10

Oleh: Fariz Gaskin

 

Salam ceria buat semua pembaca budiman. Pada minggu ini, kita akan mempelajari latihan HTML5 bahagian ketiga. Kali ini, kita akan pelajari kaedah menghasilkan imej vektor menggunakan elemen <svg>.

 

Di dalam artikel yang terdahulu, kita telah pelajari kaedah melukis imej raster menggunakan elemen <canvas>. Imej raster merupakan imej atau gambar yang terdiri dari ribuan, malah jutaan pixel pelbagai warna yang tersusun rapi.

 

Imej vektor pula, dilukis menggunakan sekumpulan kod aturcara. Setiap titik, garisan dan warna merupakan ‘objek’ sepertimana yang dijelaskan dalam artikel ke-7 Genius Corner berkenaan Objek dan Kelas di dalam Java.

 

Imej raster biasanya diperolehi melalui kamera digital, manakala imej vektor pula biasanya dilukis menggunakan perisian khas seperti Adobe Illustrator atau Corel Draw. Tanpa membuang masa, mari kita mulakan latihan kali ini.

 

Latihan

 

Langkah 1: Buka mana-mana text editor yang anda miliki seperti Notepad (Windows) atau TextEdit (MacOS) dan tuliskan kod aturcara berikut.

 

<!DOCTYPE html>

<html>

<body>

<svg height=”130″ width=”700″>

 <defs>

   <linearGradient id=”grad1″ x1=”0%” y1=”0%” x2=”100%” y2=”0%”>

     <stop offset=”0%”

     style=”stop-color:rgb(255,255,0);stop-opacity:1″ />

     <stop offset=”100%”

     style=”stop-color:rgb(255,0,0);stop-opacity:1″ />

   </linearGradient>

 </defs>

 <ellipse cx=”210″ cy=”70″ rx=”185″ ry=”55″ fill=”url(#grad1)”/>

 <text fill=”#ffffff” font-size=”45″ font-family=”Verdana”

 x=”50″ y=”86″>Genius Corner</text>

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

 

Langkah 2: Save hasil kerja anda tadi dengan nama svg.html ke dalam folder Genius Corner seperti latihan terdahulu.

 

Langkah 3: Double-click fail tadi untuk melihat hasilnya melalui pelayar web.

Semakan

 

Di dalam kod aturcara tadi, kita telah menghasilkan imej vektor yang mengandungi sebuah ellips dengan gradient warna dari kuning ke warna merah, serta memaparkan tulisan Genius Corner berwarna putih.

 

Perkara pertama yang kita lakukan ialah menetapkan saiz imej vektor SVG kepada 130 pixel tinggi, kali 700 pixel lebar. Seterusnya, elemen <linearGradient> diguna untuk menetapkan warna serta arah gradient (dari kiri ke kanan).

 

Kod aturcara rgb(255,255,0) diguna untuk penetapan warna merah, manakala kod rgb(255,0,0) diguna untuk penetapan warna kuning. Kemudian, elemen <ellipse> diguna untuk melukis imej berbentuk ellips di dalam kanvas <svg>.

 

Objek gradient dengan id “grad1” digunakan untuk penetapan warna latar ellips tadi. Akhir sekali, elemen <text> diguna untuk menulis perkataan “Genius Corner” di atasnya. Kod aturcara “fill=#ffffff” diguna untuk penetapan warna putih tulisan tadi.

 

Kelebihan imej vektor ialah keupayaannya untuk di zoom seberapa besar sekalipun tanpa menyebabkan imej kelihatan pecah. Keupayaan ini membolehkan imej vektor dilukis dengan saiz yang sangat kecil berbanding imej raster.

Pelajar SK Sultan Ismail, Kemaman sedang melakukan latihan secara berkumpulan

 

Soalan

 

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan. Sila ubahsuai kod aturcara tadi supaya:

 

  1. Ubah warna gradient kepada Biru dan Hijau
  2. Ubah teks Genius Corner kepada nama anda sendiri
  3. Ubah saiz dan kedudukan ellips agar sepadan dengan nama anda

 

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila emailkan kepada farizgaskin@gmail.com dan kami akan cuba jawab sepantas mungkin. Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!

Leave a Reply

Your email address will not be published. Required fields are marked *