HTML5 CANVAS

MENU
HTML5 ?

HTML5 VIDEO
HTML5 AUDIO
HTML5 CANVAS

TAG BARU DI HTML5

Apa itu HTML5?
HTML5 adalah standar terbaru untuk HTML.
Versi sebelumnya dari HTML, HTML 4.01, datang pada tahun 1999, dan
internet telah berubah secara signifikan sejak saat itu.
HTML5 dirancang untuk menggantikan HTML 4, XHTML, dan HTML
DOM Level 2.
Hal ini khusus dirancang untuk memberikan konten yang kaya tanpa
membutuhkan plugin tambahan. Versi saat memberikan segala
sesuatu dari animasi grafis, musik untuk film, dan juga dapat
digunakan untuk membangun aplikasi web yang rumit.
HTML5 juga cross-platform. Hal ini dirancang untuk bekerja apakah
Anda menggunakan PC, atau Tablet, Smartphone, atau Smart TV.

Bagaimana Memulai Apakah HTML5?
HTML5 merupakan kerjasama antara World Wide Web Consortium
(W3C) dan Kelompok Kerja Teknologi Web Hypertext Application
(WHATWG).
WHATWG bekerja dengan bentuk web dan aplikasi, dan W3C bekerja
dengan XHTML 2.0. Pada tahun 2006, mereka memutuskan untuk
bekerja sama dan membuat versi baru dari HTML.
Beberapa aturan untuk HTML5 didirikan:
•Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
•Kebutuhan untuk plugin eksternal (seperti Flash) harus dikurangi
•Penanganan kesalahan harus lebih mudah daripada versi
sebelumnya
•Scripting harus diganti dengan yang lebih markup
•HTML5 harus perangkat-independen
•Proses pembangunan harus terlihat untuk umum

The HTML5 <! DOCTYPE>
Dalam HTML5 hanya ada satu deklarasi,
dan sangat sederhana <DOCTYPE>:
<!DOCTYPE html>

Sebuah Dokumen Minimum HTML5
Di bawah ini adalah dokumen HTML5 sederhana, dengan minimal tags
diperlukan:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>

HTML5 - Fitur Baru
Beberapa fitur baru yang paling menarik di HTML5
adalah:
•Unsur <canvas> untuk gambar 2D
•The <video> dan elemen <audio> untuk media
pemutaran
•Dukungan untuk penyimpanan lokal
•Baru-elemen konten tertentu, seperti <article>,
<footer>, <header>, <nav>, <section>
•Bentuk kontrol baru, seperti kalender, tanggal, waktu,
email, url, pencarian

Dukungan Browser untuk HTML5
HTML5 adalah pekerjaan yang sedang berjalan.
Namun, semua browser utama (Chrome, Firefox,
Internet Explorer, Safari, Opera) mendukung elemen
HTML5 baru dan API, dan terus menambahkan HTML5
baru fitur untuk versi terbaru mereka.
The HTML 5 kelompok kerja termasuk AOL, Apple,
Google, IBM, Microsoft, Mozilla, Nokia, Opera, dan
ratusan vendor lainnya.

Menulis HTML Menggunakan Notepad atau TextEdit
HTML dapat diedit dengan menggunakan editor HTML profesional seperti:
•Adobe Dreamweaver
•Microsoft Expression Web
•CoffeeCup HTML Editor
Namun, untuk belajar HTML sebaiknya editor teks seperti Notepad (PC) atau TextEdit
(Mac). Kami percaya menggunakan editor teks sederhana adalah cara yang baik untuk
belajar HTML.

Ikuti 4 langkah berikut untuk membuat
halaman web pertama Anda dengan Notepad.
1

2

3

4

Langkah 1: Jalankan
Notepad
Untuk memulai Notepad kunjungi:
Mulai
All Programs
Accessories
Notepad
4 langkah

Langkah 2: Edit HTML Anda dengan
Notepad
Ketik kode HTML Anda ke Notepad Anda:

4 langkah

Langkah 3: Simpan HTML Anda
Pilih Simpan sebagai .. di menu file Notepad itu.
Bila Anda menyimpan file HTML, Anda dapat
menggunakan baik htm. Atau ekstensi file. Html.
Tidak ada perbedaan, itu sepenuhnya terserah
Anda.
Simpan file dalam folder yang mudah diingat.

4 langkah

Langkah 4: Jalankan HTML di Browser Anda
Memulai browser web Anda dan buka file html Anda dari file ,
Buka menu, atau hanya menelusuri folder dan double-klik file
HTML Anda.Hasilnya akan terlihat seperti ini:

4 langkah

HTML5 VIDEO
Video di Web
Sebelum HTML5, tidak ada standar untuk menampilkan video /
film pada halaman web.
Sebelum HTML5, video hanya bisa dimainkan dengan plug-in
(seperti flash). Namun, browser yang berbeda mendukung
berbagai plug-in.
HTML5 mendefinisikan elemen baru yang menentukan cara
standar untuk menanamkan video atau film pada halaman web:
elemen <video>.

Dukungan Browser

HTML5 Video - Cara Bekerja
Untuk menampilkan video di HTML5, ini adalah semua yang Anda butuhkan:

Contoh
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Kontrol atribut menambahkan kontrol video, seperti play, pause, dan volume.
Ini juga merupakan ide yang baik untuk selalu menyertakan atribut lebar dan tinggi. Jika tinggi dan
lebar diatur, ruang yang dibutuhkan untuk video dicadangkan saat halaman dimuat. Namun, tanpa
atribut-atribut ini, browser tidak mengetahui ukuran video, dan tidak dapat cadangan ruang yang
tepat untuk itu. Efeknya akan bahwa tata letak halaman akan berubah selama loading (sementara
beban video).
Anda juga harus memasukkan konten teks antara <video> dan </ video> tag untuk browser yang
tidak mendukung elemen <video>.
Unsur <video> memungkinkan beberapa elemen <source>. elemen <source> dapat link ke file video
yang berbeda. Browser akan menggunakan format yang diakui pertama.

Dukungan Browser

HTML5 Audio
Audio di Web
Sebelum HTML5, tidak ada standar untuk memutar file audio
pada halaman web.
Sebelum HTML5, file audio harus bermain dengan plug-in
(seperti flash). Namun, browser yang berbeda mendukung
berbagai plug-in.
HTML5 mendefinisikan elemen baru yang menentukan cara
standar untuk menanamkan file audio pada halaman web:
elemen <audio>.

Dukungan Browser

HTML5 Audio - Cara Bekerja
Untuk memutar file audio dalam HTML5, ini adalah semua yang Anda butuhkan:
Contoh
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Kontrol atribut menambahkan kontrol audio, seperti play, pause, dan volume.
Anda juga harus memasukkan konten teks antara <audio> dan </ audio> tag
untuk browser yang tidak mendukung elemen <audio>.
Unsur <audio> memungkinkan beberapa elemen <source>. elemen <source>
dapat link ke file audio yang berbeda. Browser akan menggunakan format yang
diakui pertama.

Dukungan Browser

Dukungan Browser
Internet Explorer 9 +, Firefox, Opera,
Chrome, Dan Safari Mendukung Elemen
<Video> Dan <Audio>. Saat Ini, Ada 3

Format Video dan Audio Yang
Didukung Untuk Elemen <Video> dan
<Audio>: Mp4, Webm, Dan Ogg

Dukungan Browser

HTML5 Canvas
Canvas di Web
Unsur <canvas> digunakan untuk menggambar grafik, on the fly, pada halaman
web.
Contoh di sebelah kiri menunjukkan sebuah persegi panjang merah, persegi
panjang gradien, persegi panjang multicolor, dan beberapa teks multicolor yang
ditarik ke kanvas.

Apa Canvas?

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

Buat kanvas
Sebuah kanvas adalah area persegi pada halaman HTML, dan itu ditentukan
dengan elemen <canvas>.
Catatan: Secara default, elemen <canvas> tidak memiliki perbatasan 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 naskah), 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 Ke The Canvas Dengan JavaScript
Semua menggambar di kanvas harus dilakukan di
dalam JavaScript:
Contoh
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Contoh menjelaskan
Pertama, menemukan elemen <canvas>:
Kemudian, sebut getContext () metode (Anda harus lulus string "2d" ke
getContext (metode)):
The getContext ("2d") objek adalah built-in objek HTML5, dengan banyak
properti dan metode untuk menggambar jalan, kotak, lingkaran, teks,
gambar, dan banyak lagi.
Dua baris berikutnya menggambar persegi panjang merah:
ctx.fillStyle = "#FF0000";
Properti fillStyle bisa menjadi warna CSS, gradien, atau pola. The fillStyle
default adalah # 000000 (hitam).
The fillRect ( x, y, lebar, tinggi ) metode menggambar persegi panjang diisi
dengan gaya mengisi saat ini.

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

Canvas - Jalan
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 di posisi (0,0), dan titik
akhir pada posisi (200.100). Kemudian
gunakan stroke () metode untuk benarbenar menarik garis:
JavaScript:
var c =
document.getElementById("myCanvas");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Untuk menggambar sebuah lingkaran di
kanvas, kita akan menggunakan metode
berikut:
busur (x, y, r, start, stop)
Untuk benar-benar menggambar
lingkaran, kita harus menggunakan salah
satu dari "tinta" metode, seperti stroke ()
atau mengisi ().

Contoh
Buat lingkaran dengan metode arc ():
JavaScript:
var c =
document.getElementById("myCanvas");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Canvas - Teks
Untuk menggambar teks pada kanvas, properti yang paling penting dan
metode adalah:
Font - mendefinisikan sifat font untuk teks
fillText ( teks, x, y ) - Menarik "diisi" teks pada kanvas
strokeText ( teks, x, y ) - Menarik teks pada kanvas (no fill)
Menggunakan fillText ():
Contoh
Tulis tinggi 30px teks penuh di kanvas, menggunakan font "Arial":
JavaScript:
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

Canvas - Gradien
Gradien dapat digunakan untuk mengisi persegi panjang, lingkaran, garis,
teks, dll Shapes 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 radial / melingkar
gradien
Setelah kita memiliki objek gradien, kita harus menambahkan dua atau
lebih warna berhenti.
The addColorStop () metode menentukan berhenti warna, dan posisinya di
sepanjang gradien. Posisi Gradient dapat di mana saja antara 0 sampai 1.
Untuk menggunakan gradien, mengatur properti fillStyle atau strokeStyle
untuk gradien, dan kemudian menggambar bentuk, seperti persegi
panjang, teks, atau garis.
Menggunakan createLinearGradient ():

Contoh
Buat gradien linier. Isi persegi panjang dengan gradien:
JavaScript:
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;

Canvas - Images
Untuk menggambar
sebuah gambar pada
kanvas, kita akan
menggunakan metode
berikut:
drawImage ( gambar, x, y
)

Gambar untuk menggunakan:

Contoh
Menggambar gambar ke kanvas:
JavaScript:
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);

HTML Tag <canvas>
Tag

Description

<canvas>

Used to draw graphics, on the fly, via
scripting (usually JavaScript)

Memerintahkan abjad
: tag baru di HTML5.
Tag

<!DOCTYPE
>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>

Description
Defines a comment
Defines the document type
Defines a hyperlink
Defines an abbreviation
Not supported in HTML5. Use <abbr> instead.
Defines an acronym
Defines contact information for the author/owner of a document
Not supported in HTML5. Use <object> instead.
Defines an embedded applet
Defines an area inside an image-map
Defines an article
Defines content aside from the page content
Defines sound content
Defines bold text
Specifies the base URL/target for all relative URLs in a document
Not supported in HTML5. Use CSS instead.
Specifies a default color, size, and font for all text in a document
Isolates a part of text that might be formatted in a different direction from other text outside it
Overrides the current text direction
Defines big text

<blockquote> Defines a section that is quoted from another source
<body>
Defines the document's body
<br>
Defines a single line break
<button>
Defines a clickable button
<canvas>

Used to draw graphics, on the fly, via scripting (usually JavaScript)

<caption>

<cite>
<code>

Defines a table caption
Defines centered text
Defines the title of a work
Defines a piece of computer code

<col>

Specifies column properties for each column within a <colgroup> element

<colgroup>

Specifies a group of one or more columns in a table for formatting

<center>

<command> Defines a command button that a user can invoke
<datalist>

Specifies a list of pre-defined options for input controls

<dd>

Defines a description/value of a term in a description list

<del>

Defines text that has been deleted from a document

<details>
<dfn>
<dialog>

Defines additional details that the user can view or hide
Defines a definition term
Defines a dialog box or window
Not supported in HTML5. Use <ul> instead.
<dir>
Defines a directory list
<div>
Defines a section in a document
<dl>
Defines a description list
<dt>
Defines a term/name in a description list
<em>
Defines emphasized text
<embed> Defines a container for an external (non-HTML) application
<fieldset> Groups related elements in a form
<figcaption
Defines a caption for a <figure> element
>
<figure>
Specifies self-contained content
<font>
Defines font, color, and size for text
<footer>
Defines a footer for a document or section
<form>
Defines an HTML form for user input
Not supported in HTML5.
<frame>
Defines a window (a frame) in a frameset

<details>

Defines additional details that the user can view or hide

<dfn>
<dialog>

<div>
<dl>
<dt>
<em>

Defines a definition term
Defines a dialog box or window
Not supported in HTML5. Use <ul> instead.
Defines a directory list
Defines a description list
Defines a term/name in a description list
Defines emphasized text

<embed>

Defines a container for an external (non-HTML) application

<fieldset>
<figcaption>
<figure>

Groups related elements in a form
Defines a caption for a <figure> element
Specifies self-contained content
Defines font, color, and size for text
Defines a footer for a document or section
Defines an HTML form for user input
Defines a window (a frame) in a frameset

<dir>

<font>
<footer>
<form>
<frame>

<main>
<map>
<mark>
<menu>
<meta>

Specifies the main content of a document
Defines a client-side image-map
Defines marked/highlighted text
Defines a list/menu of commands
Defines metadata about an HTML document

<meter>

Defines a scalar measurement within a known range (a gauge)

<nav>

Defines navigation links

<noframes>

Defines an alternate content for users that do not support frames

<noscript>

Defines an alternate content for users that do not support client-side scripts

<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>

Defines an embedded object
Defines an ordered list
Defines a group of related options in a drop-down list
Defines an option in a drop-down list
Defines the result of a calculation
Defines a paragraph
Defines a parameter for an object
Defines preformatted text
Represents the progress of a task
Defines a short quotation

<rp>

Defines what to show in browsers that do not support ruby annotations

<rt>

Defines an explanation/pronunciation of characters (for East Asian typography)

<ruby>

Defines a ruby annotation (for East Asian typography)

<s>
<samp>
<script>
<section>
<select>
<small>

Defines text that is no longer correct
Defines sample output from a computer program
Defines a client-side script
Defines a drop-down list
Defines smaller text

<source>

Defines multiple media resources for media elements (<video> and <audio>)

<span>

Not supported in HTML5. Use <del> instead.
Defines strikethrough text
Defines important text
Defines style information for a document
Defines subscripted text
Defines a visible heading for a <details> element
Defines superscripted text

<strike>
<strong>
<style>
<sub>
<summary>
<sup>

<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>

Defines a table
Groups the body content in a table
Defines a cell in a table
Defines a multiline input control (text area)
Groups the footer content in a table
Defines a header cell in a table
Groups the header content in a table
Defines a date/time
Defines a title for the document
Defines a row in a table

<track>

Defines text tracks for media elements (<video> and <audio>)

<tt>

Defines teletype text

<u>

Defines text that should be stylistically different from normal text

<ul>
<var>
<video>
<wbr>

Defines an unordered list
Defines a variable
Defines a video or movie
Defines a possible line-break

HTML5 CANVAS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie HTML5 CANVAS

Ähnlich wie HTML5 CANVAS (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

HTML5 CANVAS