Ilmu Kita Bersama

Sabtu, 24 Agustus 2013

Latihan PHP 2

Pada Kali ini saya akan memberi Script untuk membuat Biodata pada PHP menggunakan fungsi Variabel.

Script:

<?php
//Variabel yang tertera
$namle='Dimicko Asghary';
$nampa='Miko';
$ttl='Sidoarjo, 02 Agustus 1997';
$umur=16;
$asal='SMPN 1 Kupang';
$ala='Jl.Danau Maninjau 3 G2F/11';
$tb='172/65';
$cc='Manager';
$aga='Islam';
$hob="Wisata Kuliner";

/* Menampilkan Output */
echo " Hello my name is Dimicko Asghary ";
?>
 
<?php echo "Data Diri"; ?>
<html>
<head>
<body>
 
<table border="0">
<tr>
<td> <?php echo "      Nama Lengkap"; ?> </td>
<td> <?php echo "      :"; ?> </td>
<td> <?php echo "      $namle"; ?> </td>
<td rowspan="10">

<img src="Dimicko.JPG" width="150" height="220">

</td>
</tr>
<tr>
<td> <?php echo "      Nama Panggilan"; ?> </td>
<td> <?php echo "      :"; ?> </td>
<td> <?php echo "      $nampa"; ?> </td>
</tr>
<tr>
<td> <?php echo "      Tempat, Tanggal Lahir"; ?> </td>
<td> <?php echo "      :"; ?> </td>
<td> <?php echo "      $ttl"; ?> </td>
</tr>
<tr>
<td> <?php echo "      Umur"; ?> </td>
<td> <?php echo "      :"; ?> </td>
<td> <?php printf ("      %.0f", $umur); ?> </td>
</tr>
<tr>
<td> <?php echo "      Asal SMP"; ?> </td>
<td> <?php echo "      :"; ?> </td>
<td> <?php echo "      $asal"; ?> </td>
</tr>
<tr>
<td> <?php echo "      Alamat"; ?> </td>
<td> <?php echo "      :"; ?> </td>
<td> <?php echo "      $ala"; ?> </td>
</tr>
<tr>
<td> <?php echo "      Tinggi/Berat"; ?> </td>
<td> <?php echo "      :"; ?> </td>
<td> <?php printf ("      %s", $tb); ?> </td>
</tr>
<tr>
<td> <?php echo "      Cita-Cita"; ?> </td>
<td> <?php echo "      :"; ?> </td>
<td> <?php echo "      $cc"; ?> </td>
</tr>
<tr>
<td> <?php echo "      Agama"; ?> </td>
<td> <?php echo "      :"; ?> </td>
<td> <?php echo "      $aga"; ?> </td>
</tr>
<tr>
<td> <?php echo "      Hobby"; ?> </td>
<td> <?php echo "      :"; ?> </td>
<td> <?php echo "      $hob"; ?> </td>
</tr>
</table>
# Akhir Program
</body>
</html>

Output/Hasil

Sekian, Semoga Bermanfaat.........

Tutorial ASP 1

19.13 Web Programming No comments

Pada Tutorial kali ini saya akan membahas mengenai praktek ASP.NET di Visual Studio 2012

Menurut Pengertiannya ASP.NET (Active Server Pages. NET) adalah teknologi baru dalam pemrograman web. ASP.NET dimiliki oleh Microsoft jadi tidak open source.

langkah-langkahnya:

1. Buka Visual Studio 2012

~~~Setelah itu pilih New Project

2. Setelah itu pilih Visual C# -> Windows -> Console Application

3. Beri nama project PraktekCSharp, untuk location bisa diletakan dimana saja

4. Lalu akan terbuka Class Program, isikan script seperti dibawah

5. Kemudian Run, atau juga bisa dengan menekan tombol Ctrl+F5

~~~ Pada kasus selanjutnya kita akan mencoba untuk menggabungkan 2 class untuk membentuk 1 program

6. Tambahkan class baru

beri nama volume_balok

7. Tambahkan method sepeerti dibawah ini

8. Kembali ke program.cs lalu isikan script seperti dibawah ini

~ Run, Hasilnya akan seperti ini....

~~~ Pada kasus selanjutnya kita akan menampilkan program biodata

Hampir sama seperti tutorial yang diatas, buka New Project lalu namai Biodataku

~~ Beri Script di Class Program seperti ini:

Setelah itu Run...

Sekian Tutorial dari saya, semoga bermanfaat........

Latihan PHP 1 (3)

21.26 Web Programming No comments

4. untuk membuat Project di Php Designer 8 dengan membuka file direktori yang sudah dibuat di No.1 sehingga dapat dijalankan pada internal browser atau external browser!

Berikut langkah-langkahnya:

1.) Buka PHP Designer 8, lalu klik Project Manager.

2.) Setelah itu pada Project Manager klik New.

3.) Pada New Project Wizard ubah project tittle menjadi PraktikumPHP21, jika sudah klik Next

4.) Pilih Project Root folder menjadi c:\xampp\htdocs\PraktikumPHP21, jika sudah klik Next

5.) Setelah itu pada Edit Project pilih menu Localhost. Ubah serverpath menjadi localhost, localpath menjadi c:\xampp\htdocs\PraktikumPHP2\, dan port menjadi 80. Klik OK jika sudah

6.) Jika sudah berhasil akan muncul tampilan seperti berikut. Klik OK

7.) Setelah itu pilih file praktikumphp.php pada project PraktikumPHP21 dan klik Run, maka akan menjalankan script php kita tanpa membuka browser eksternal.

Selamat Mencoba...

Latihan PHP 1 (2)

21.00 Web Programming No comments

3. Yang kedua kita akan membuat New Project di Netbeans dengan membuka file direktori yang sudah dibuat di No.1 sehingga dapat dijalankan pada browser external (chrome/fiefox) dengan menekan SHIFT+F6.

Langkah-Langkah:

1.) Buka Netbeans lalu klik New Project pada menu File.

2.) Setelah itu akan ada tampilan Choose Project, pilih Categories sebagai PHP dan Projects sebagai PHP Application with Existing Sources, dan klik next.

3.) Setelah itu pilih source folder "PraktikumPHP21" dan klik next.

4.) Jika sudah lalu setting Run configuration, pilih Local Web site. Dan ubah Project url menjadi http://localhost/PraktikumPHP21/. Klik Finish

5.) Jika sudah berhasil, klik Option -> General-> ubah Web browser menjadi Chrome. Klik OK

6.) Kemudian buka file praktikumphp.php dan tekan SHIFT+F6, maka akan langsung membuka file tadi di web browser.

Selamat Mencoba...

Latihan PHP 1 (1)

19.32 Web Programming No comments

Praktikum PHP 1

Pada kali ini kita akan mempelajari dasar salah satu pemrograman web yaitu PHP (Hypertext Preprocessor). PHP sendiri merupakan bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML banyak dipakai untuk memrogram situs web dinamis, PHP dapat digunakan untuk membangun sebuah CMS. Pada kali ini saya akan mempraktekan langkah-langkah dengan menggunakan Dreamweaver CS6, PHP Designer 8, dan Netbeans. Result atau hasil script tersebut juga dapat kita lihat tanpa membuka external browser.

Toolkit:
1. XAMPP
2. Adobe Dreamweaver
3. Netbeans
4. PHP Designer
5. Notepad++

Catatan: Port apache harus diubah menjadi 50 jika tidak bisa running, karena salah satu hal, contohnya karena bentrok dengan IIS.

Berikut langkahnya :

Edit file http.conf yang di c:/xampp/apache/conf/
Cari ServerName localhost:80 di file http.conf lalu ubah port yang semula 80 menjadi 50 (terserah anda. 50 adalah cth) sehingga menjadi localhost:50
lalu cari kata Listen 80 ubah menjadi Listen 0.0.0.0:50
lalu restart apache di xampp anda.
buka browser lalu ketikan localhost:50, maka apache anda bisa

Langsung Saja Kita Mulai Langkah-Langkahnya

1. Buat file PHP di folder -> xampp/htdocs/PraktikumPHP21/praktikumphp.php. Buat program menampilkan Data Diri, seperti contoh gambar dibawah ini.

Untuk memudahkan, scriptnya seperti ini.

<?php
echo "<font color=red size=5> Hello my name is Dimicko Asghary </font>";
?>
<br><br>
<?php echo "<font color=black size=3><b>Data Diri</b></font>"; ?> 
<html>
<body>
    <br><br>
<table border="0">
 <tr>
     <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=blue size=3><b>Nama Lengkap</b></font>"; ?> </td>
  <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=green size=4><b>:</b></font>"; ?> </td>
        <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dimicko Asghary"; ?> </td>
    </tr>
    <tr>
     <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=blue size=3><b>Nama Panggilan</b></font>"; ?> </td>
  <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=green size=4><b>:</b></font>"; ?> </td>
        <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Miko"; ?> </td>
 </tr>
 <tr>
     <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=blue size=3><b>Tempat, Tanggal Lahir</b></font>"; ?> </td>
  <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=green size=4><b>:</b></font>"; ?> </td>
        <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sidoarjo, 02 Agustus 1997"; ?> </td>
 </tr>
 <tr>
     <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=blue size=3><b>Asal SMP</b></font>"; ?> </td>
  <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=green size=4><b>:</b></font>"; ?> </td>
        <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SMPN 1 Kupang"; ?> </td>
 </tr>
 <tr>
     <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=blue size=3><b>Alamat</b></font>"; ?> </td>
  <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=green size=4><b>:</b></font>"; ?> </td>
        <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Jl.Danau Maninjau 3 G2F/11"; ?> </td>
 </tr>
<tr>
     <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=blue size=3><b>Tinggi/Berat</b></font>"; ?> </td>
  <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=green size=4><b>:</b></font>"; ?> </td>
        <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;172/65"; ?> </td>
 </tr>
<tr>
     <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=blue size=3><b>Cita-Cita</b></font>"; ?> </td>
  <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=green size=4><b>:</b></font>"; ?> </td>
        <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Manager"; ?> </td>
 </tr> 
<tr>
     <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=blue size=3><b>Agama</b></font>"; ?> </td>
  <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=green size=4><b>:</b></font>"; ?> </td>
        <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Islam"; ?> </td>
 </tr> 
<tr>
     <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=blue size=3><b>Hobby</b></font>"; ?> </td>
  <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color=green size=4><b>:</b></font>"; ?> </td>
        <td> <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Wisata Kuliner"; ?> </td>
 </tr> 
</table>
</body>
</html>


2. Yang pertama kita akan membuat New Site di Dreamweaver CS6 sehingga file
PHP dari praktikumphp.php (folder xampp/htdocs/PraktikumPHP21) yang sudah

dibuat dapat langsung ditampilkan di Live View atau di browser external!



Langkah-Langkah:

1.) Buka Dreamweaver lalu pilih "New Site".


2.) Setelah itu akan ada tampilan seperti gambar di bawah ini, pilih saja "New Site".


3.) Ubah site name menjadi "PraktikumPHP21" dan Local site folder menjadi "C:\xampp\htdocs\PraktikumPHP21\".



2.) Setelah itu ubah settingan server seperti gambar dibawah ini.



3.) Jika sudah selesai pilih save, dan akan muncul tampilan seperti berikut. Klik Done



4.) Setelah itu akan ada tampilan baru seperti gambar dibawah yang menandakan proses tadi   berhasil.



Mudah kan kawan-kawan?? Selamat mencoba...

HTML 5 Canvas

05.53 Web Programming 1 comment

Unsur <canvas> digunakan untuk menggambar grafik, on the fly, pada halaman web.

Contoh sebuah persegi panjang merah, persegi panjang gradien, persegi panjang multicolor, dan beberapa teks multicolor pada kanvas:

Apa Itu Canvas?

Elemen HTML5 <canvas> digunakan untuk menggambar grafik, on the fly, melalui scripting (JavaScript biasanya).
Unsur <canvas> hanya wadah untuk grafis. Anda harus menggunakan script untuk benar-benar menarik grafis.
Kanvas memiliki beberapa metode untuk menggambar jalur, kotak, lingkaran, karakter, dan menambahkan gambar.

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support untuk elemen <canvas>.

Note: Internet Explorer 8 versi terbaru, tidak support untuk <canvas> element.

Membuat Canvas

Kanvas adalah area persegi pada halaman HTML, dan itu ditentukan dengan elemen <canvas>.
Catatan: Secara default, elemen <canvas> tidak memiliki border dan tidak ada konten.
Markup terlihat seperti ini:

<canvas id="myCanvas" width="200" height="100"></canvas>

Catatan: Selalu menentukan atribut id (yang akan disebut dalam script), dan lebar dan tinggi atribut untuk menentukan ukuran kanvas.
Tip: Anda dapat memiliki beberapa elemen <canvas> pada satu halaman HTML.
Untuk menambahkan border, gunakan atribut style:

Contoh

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

Menggambar Canvas Dengan JavaScript

Semua gambar di kanvas harus dilakukan di dalam JavaScript:

Contoh

Canvas Coordinates

Kanvas adalah grid dua dimensi.
Sudut kiri atas kanvas memiliki koordinat (0,0)
Jadi, fillRect () metode di atas memiliki parameter (0,0,150,75).
Ini berarti: Mulai di pojok kiri atas (0,0) dan menggambar piksel persegi panjang 150x75.
koordinat Contoh
Mouse di atas persegi panjang di bawah ini untuk melihat nya koordinat x dan y:

Canvas - Paths

Untuk menggambar garis lurus di atas kanvas, kita akan menggunakan dua metode berikut:
moveTo (x, y) mendefinisikan titik awal baris
lineto (x, y) mendefinisikan titik akhir baris
Untuk benar-benar menarik garis, kita harus menggunakan salah satu dari "tinta" metode, seperti stroke ().

Contoh
Tentukan titik awal dalam posisi (0,0), dan titik akhir pada posisi (200,100).
Kemudian gunakan stroke () metode untuk benar-benar menarik garis:

JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Untuk menggambar sebuah lingkaran di atas kanvas, kita akan menggunakan metode berikut:

arc(x, y, r, start, stop)

Untuk benar-benar menggambar lingkaran, kita harus menggunakan salah satu dari metode "ink", seperti stroke () atau fill ().

Contoh

Membuat Lingkaran menggunakan metode arc():

JavaScript:

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

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

ctx.beginPath();

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

ctx.stroke();

Canvas - Text

Untuk menggambar teks pada kanvas, properti yang paling penting dan metode adalah:

Font - mendefinisikan properti font untuk teks

fillText (text, x, y) - Menarik "filled" teks pada kanvas

strokeText (text, x, y) - Menarik teks pada kanvas (no fill)

Menggunakan fillText ():

Contoh

Menulis 30px high filled text pada canvas, menggunakan font "Arial":

JavaScript:

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

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

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

Menggunakan strokeText():

Contoh

Menulis 30px high text (no fill) pada canvas, menggunakan font "Arial":

JavaScript:

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

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

ctx.font="30px Arial";

ctx.strokeText("Hello World",10,50);

Canvas - Gradients

Gradien dapat digunakan untuk mengisi persegi panjang, lingkaran, garis, teks, dll.
Bentuk pada kanvas tidak terbatas pada warna solid.
Ada dua jenis gradien:

createLinearGradient (x, y, x1, y1) - Menciptakan gradien linier
createRadialGradient (x, y, r, x1, y1, r1) - Membuat gradien radial / melingkar

Setelah kita memiliki objek gradien, kita harus menambahkan dua atau lebih warna stops.
metode addColorStop () menentukan stops warna, dan posisinya di sepanjang gradien. Posisi gradien dapat di mana saja antara 0 sampai dengan 1.

Untuk menggunakan gradien, mengatur properti fillStyle atau strokeStyle untuk gradien, dan kemudian menggambar bentuk, seperti persegi panjang, teks, atau garis.
Menggunakan createLinearGradient ()

Contoh

Membuat linear gradient. Isi persegi panjang dengan gradient:

JavaScript:

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,"white");

// Fill with gradient

ctx.fillStyle=grd;

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

Menggunakan createRadialGradient():

Contoh

membuat radial/circular gradient. Isi persegi panjang dengan gradient:

JavaScript:

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

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

// Create gradient

var grd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle=grd;

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

Canvas - Images

Untuk menggambar image pada canvas, menggunakan metode:

drawImage(image,x,y)

Image yang digunakan

Contoh

Gambarlah gambar pada canvas seperti ini:

JavaScript:

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

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

var img=document.getElementById("scream");

ctx.drawImage(img,10,10);

Elemen Baru HTML 5

00.13 Web Programming No comments

Elemen baru di HTML5

Internet, dan penggunaan internet, telah berubah banyak sejak HTML 4.01 menjadi standar pada tahun 1999.

Hari ini, beberapa elemen dalam HTML 4.01 yang usang, tidak pernah digunakan, atau tidak menggunakan cara mereka dimaksudkan. Semua unsur-unsur yang dihapus atau ditulis ulang di HTML5.

Untuk lebih menangani penggunaan internet saat ini, HTML5 juga mencakup unsur-unsur baru untuk grafis menggambar, menambahkan konten media, struktur yang lebih baik halaman, penanganan bentuk yang lebih baik, dan beberapa API untuk menyeret / drop elemen, cari Geolocation, termasuk penyimpanan web, tembolok aplikasi, pekerja web, dan lain-lain

Elemen Baru <canvas>

Tag	Deskripsi
<canvas>	Digunakan untuk menggambar grafis, on the fly, melalui scripting (JavaScript biasanya)

Elemen Media Baru

Tag	Deskripsi
<audio>	Mendefinisikan konten suara
<video>	Mendefinisikan video atau movie
<source>	Mendefinisikan sumber beberapa media untuk <video> dan <audio>
<embed>	Mendefinisikan wadah untuk aplikasi eksternal atau konten interaktif (plug-in)
<track>	Defines trek teks untuk <video> dan <audio>

Elemen Form Baru

Tag	Deskripsi
<datalist>	Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input
<keygen>	Mendefinisikan kunci-pair bidang pembangkit (untuk formulir)
<output>	Mendefinisikan hasil dari perhitungan

Semantic / Struktural Elemen Baru

HTML5 menawarkan unsur-unsur baru untuk struktur yang lebih baik:

Tag	Deskripsi
<article>	Mendefinisikan artikel
<aside>	Mendefinisikan konten selain dari konten halaman
<bdi>	Mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luar itu
<command>	Mendefinisikan sebuah tombol perintah bahwa seorang pengguna dapat meminta
<details>	Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan
<dialog>	Mendefinisikan sebuah kotak dialog atau jendela
<summary>	Mendefinisikan sebuah judul terlihat untuk elemen <details>
<figure>	Menentukan konten mandiri, seperti ilustrasi, diagram, foto, daftar kode, dll
<figcaption>	Mendefinisikan sebuah caption untuk elemen <figure>
<footer>	Mendefinisikan footer untuk dokumen atau bagian
<header>	Mendefinisikan header untuk dokumen atau bagian
<hgroup>	Grup seperangkat <h1> sampai <h6> ketika heading memiliki beberapa tingkatan
<mark>	Mendefinisikan marka / teks bercahaya
<meter>	Mendefinisikan pengukuran skalar dalam kisaran yang dikenal (gauge)
<nav>	Mendefinisikan navigation links
<progress>	Merepresentasikan progress dari suatu task
<ruby>	Mendefinisikan sebuah penjelasan ruby (untuk tipografi Asia Timur)
<rt>	Mendefinisikan sebuah penjelasan / pengucapan karakter (untuk tipografi Asia Timur)
<rp>	Mendefinisikan apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby
<section>	Mendefinisikan bagian dalam dokumen
<time>	Mendefinisikan tanggal/waktu
<wbr>	Mendefinisikan garis-break

Elemen Yang Dihapus

Berikut ini elemen HTML 4 yang dikeluarkan dari HTML5:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<frame>
<frameset>
<noframes>
<strike>
<tt>

Sabtu, 24 Agustus 2013

Jumat, 02 Agustus 2013

Senin, 29 April 2013

Apa Itu Canvas?

Browser Support

Membuat Canvas

Menggambar Canvas Dengan JavaScript

Canvas Coordinates

Canvas - Paths

Untuk menggambar sebuah lingkaran di atas kanvas, kita akan menggunakan metode berikut: arc(x, y, r, start, stop)

Untuk menggambar sebuah lingkaran di atas kanvas, kita akan menggunakan metode berikut:

arc(x, y, r, start, stop)

Contoh

Canvas - Text

Untuk menggambar teks pada kanvas, properti yang paling penting dan metode adalah:

Font - mendefinisikan properti font untuk teks

fillText (text, x, y) - Menarik "filled" teks pada kanvas

strokeText (text, x, y) - Menarik teks pada kanvas (no fill)

Menggunakan fillText ():

Contoh

Contoh

Canvas - Gradients

Contoh

Contoh

Canvas - Images

Image yang digunakan

Contoh

Semantic / Struktural Elemen Baru

Elemen Yang Dihapus

Social Profiles

Label

Arsip Blog

About Author

Anda Visitor Ke

Categories

Introduction

Referensi yang harus ditambahkan

Pages

Follow Me

Untuk menggambar sebuah lingkaran di atas kanvas, kita akan menggunakan metode berikut:

arc(x, y, r, start, stop)