CANVAS – HTML 5

Pengertian Canvas

<canvas> di HTML 5 adalah element yang digunakan untuk menggambar grafik, object di website yg umumnya melalui script javascript.
<canvas> hanya merupakan wadah untuk menggambar, dan untuk menggambarnya anda harus menggunakan script, misal javascript.
<canvas> memiliki beberapa metode untuk menggambar Garis, kotak, lingkaran, karakter, dan menambahkan gambar.

Membuat Canvas

Canvas adalah area persegi yang dibuat menggunakan tag

contoh :
<canvas id=”kanvasku” width=”200″ height=”100″></canvas>
Saat senggang saya coba pelajari dan membuat percobaan, berikut saya coba memeberikan contoh yang saya buat semoga bermanfaat :

<!DOCTYPE html>

<html>

<head>

<script>

function persegi(){

    var cv1 = document.getElementById('myCanvas');

    var ctx = cv1.getContext('2d');

    ctx.fillStyle="#000000";

    ctx.fillRect(10,10,90,40);

    console.log(ctx);

}

function line(){

    var cv1 = document.getElementById('myCanvas');

    var ctx = cv1.getContext('2d');

    ctx.moveTo(100,50);

    ctx.lineTo(200,100);

    ctx.stroke();

}

function lingkaran(){

    var cv1 = document.getElementById('myCanvas');

    var ctx = cv1.getContext('2d');

    ctx.beginPath();

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

    ctx.stroke();

}

function text(){

    var cv1 = document.getElementById('myCanvas');

    var ctx = cv1.getContext('2d');

    ctx.font='20px, arial';

    ctx.fillStyle="#ffffff";

    ctx.fillText('Persegi',20,20);

    ctx.strokeText('Persegi',50,70);

}

</script>

</head>

<body >

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

Your browser does not support the HTML5 canvas tag.

</canvas>

<p>

<ol>

<li><a href="javascript:persegi()">Persegi</a></li>

<li><a href="javascript:line()">Line</a></li>

<li><a href="javascript:lingkaran()">Lingkaran</a></li>

<li><a href="javascript:text()">Text</a></li>

</ol>

</body>

</html>

Tadi penjelasan sederhananya.. semoga bermanfaat. silahkan dipahami. karena scriptnya setau saya tidak susah. jika ada yg tidak jelas silahkan bertanya. :)
jangan lupa gabung di grup belajar website di facebook.
sumber : http://www.w3schools.com/html/html5_canvas.asp

seperti namanya di blog ini saya akan share mengenai materi materi kuliah pemrograman web, nah pada postingan saya yang pertama ini dan guna memenuhi tugas dari Bapaak JAENI dosen pemrograman web lanjut saya di semester 3 saya di suruh untuk membuat artikel mengenai CANVAS, disini saya akan bahas tuntas mengenai Pengertian canvas dan fungsi canvas pada html5, apa itu canvas ? apa fungsi canvas ? dan bagaimana cara menggunakannya ?

pasti sobat banyak bertanya tanya mengenai hal ini, dari survey saya di internet saya membaca sedikit artikel, dan ada yang mengatakan bahwa CANVAS merupakan salah satu elemen baru dalam html5. Canvas dapat berfungsi sebagai media gambar dalam halaman website dengan dikombinasikan bersama javascript.

Canvas merupakan media gambar bitmap berbentuk segi empat yang bisa digunakan untuk me-render grafis game, animasi, dan gambar visual lainnya di halaman website secara client-side. Canvas berbentuk segi empat tanpa garis tepi dan untuk memanfaatkannya bisa menggunakan JavaScript.
Berikut ini contoh cara penggunaan canvas.

canvas harus memiliki ukuran panjang dan lebar dan untuk memastikan bahwa browser akan menampilkannya secara benar, maka doctype html5 juga harus disertakan. Sebagai langkah awal, buatlah file index.html dengan isi sebagai berikut.

<!DOCTYPE html>

<html>

<head>

<title>Test Canvas</title>

<!--[if IE]>

<![endif]-->

</head>

<body>

<h1>Program test canvas</h1>

<br /><a onclick="draw_canvas()" href="#can">Klik disini untuk menggambar</a>

</body>

</html>

di bawah tag title terdapat sebuah html comment. comen tersebut berisi bahwa Perlu diketahui bahwa IE sampai dengan versi 8 masih belum support canvas.

Nah langkah kedua untuk menampilkan gambar , buatlah sebuah fungsi dalam file thecanvas.js untuk menjalankan event click pada tombol yang telah disediakan. Berikut salah satu contoh menggambar sebuah persegi panjang dalam sebuah canvas, perhatikan dengan seksama :

function draw_canvas() {

var canvas = document.getElementById("can");

var context = canvas.getContext("2d");

context.fillRect(50, 25, 150, 100);

}

Setiap canvas memiliki drawing context masing-masing, yang digunakan untuk menggambar. Anda harus memasukkan string “2d” sebagai parameter dalam mengambil context dari canvas.Method fillRect(x, y, width, height) digunakan untuk menggambar segi empat berwarna pada canvas. Selain itu, ada juga method strokeRect(x, y, width, height) untuk menggambar garis segi empat saja.

Canvas dapat direset cukup dengan mengatur ulang salah satu property ukurannya. Anda tidak perlu mengubah ukurannya, cukup lakukan seperti baris di bawah ini menggunakan javascript.

function reset_canvas() {

var canvas = document.getElementById("can");

canvas.width = canvas.width;

}

Titik origin koordinat canvas dimulai dari sudut kiri atas, dengan sumbu x ke kanan semakin besar, dan sumbu y ke bawah semakin besar pula.

Koordinat pada canvas

Langkah kelima, untuk membuat garis, Anda bisa menggunakan method moveTo(x,y) untuk menentukan titik awal penggambaran, kemudian diikuti dengan lineTo(x,y) untuk menggambar rute. Perlu kedua method tersebut masih belum menampilkan garis yang sebenarnya, namun hanya sketsa saja. Untuk menambahkan garis, perlu dipanggil method stroke(). Berikut contoh menggambar sebuah grid dalam canvas.

function draw_grid() {

var canvas = document.getElementById("can");

var context = canvas.getContext("2d");

// menggambar garis vertikal

for (var x = 0.5; x < canvas.width; x += 10) {

context.moveTo(x, 0);

context.lineTo(x, canvas.height);

}

// menggambar garis horizontal

for (var y = 0.5; y <canvas.height; y += 10) {

context.moveTo(0, y);

context.lineTo(canvas.width, y);

}

// menampilkan gambar

context.strokeStyle = "#555";

context.stroke();

}

Menggambar grid pada canvas

Ternyata canvas juga bisa digunakan untuk menggambar teks., nih bagi yang seneng kaligrafi dan web bisa kombinasikan bakat sobat dengan membuat teks menggunakan canvas di html5. Beberapa property yang bisa diatur adalah font (dengan format css), textAlign (start, end, left, right, center), dan textBaseline (top, hanging, middle, alphabetic, ideographic, bottom). Text baseline digunakan untuk menentukan garis bawah penggambaran text. Anda bisa melihat perbedaannya pada gambar.

Baseline text pada canvas

Untuk menggambar, Anda harus memanggil method fillText(text, x, y).

function draw_text() {

var canvas = document.getElementById("can");

var context = canvas.getContext("2d");

context.font = "bold 12px sans-serif";

context.fillText("Text 1", 248, 43);

context.fillText("Text 2", 58, 165);

}

Menggambar gradient juga bukan hal yang sulit. Canvas telah menyediakannya untuk Anda. Berikut ini contoh menggambar gradient dari ujung kiri atas ke kanan bawah secara diagonal.

function draw_gradient() {

var canvas = document.getElementById("can");

var context = canvas.getContext("2d");

var my_gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);

my_gradient.addColorStop(0, "blue");

my_gradient.addColorStop(1, "white");

context.fillStyle = my_gradient;

context.fillRect(0, 0, canvas.width, canvas.height);

}

Hasil gradient pada canvas

wow ada Kemampuan canvas lainnya nih, kemampuan lainya adalah merender sebuah image. Ada beberapa cara untuk mendapatkan image yang diinginkan, yaitu dengan mengambil elemen <img> pada halaman html, atau dengan menggunakan object Image() sehingga tidak perlu meletakkan image pada html. Method yang digunakan adalah drawImage(). Method tersebut memiliki beberapa jenis parameter yang bisa digunakan. Berikut salah satu contoh penampilan gambar pada canvas.

function draw_img() {

var canvas = document.getElementById("can");

var context = canvas.getContext("2d");

var cat = new Image();

cat.src = "logo.png";

cat.onload = function() {

context.drawImage(cat, 30, 30);

};

}

Hasil tampilan gambar ke canvas

Anda juga bisa mengkombinasikannya dengan library lain seperti jQuery atau MooTools. Selamat mencoba.

Selamat mencoba. Yak itu tadi dia mengenai Pengertian canvas dan fungsi canvas pada html5, sekarang sobat jadi sedikit tahukan mengenai CANVAS, jadi dapat disimpulkan memang benar canvas merupakan fitur terbaru di html 5 dan digunakan untuk menggambar suatu objek. oke sekian dari saya, wasalamualaikum.wr.wb. terimakasih

Leave a Comment

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

Name *

Email *

Website

CAPTCHA Code *

Comment

CANVAS – HTML 5

Pengertian Canvas

Membuat Canvas

Canvas adalah area persegi yang dibuat menggunakan tag

contoh :
<canvas id=”kanvasku” width=”200″ height=”100″></canvas>
Saat senggang saya coba pelajari dan membuat percobaan, berikut saya coba memeberikan contoh yang saya buat semoga bermanfaat :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49 <!DOCTYPE html>
<html>
<head>
<script>
function persegi(){
var cv1 = document.getElementById('myCanvas');
var ctx = cv1.getContext('2d');
ctx.fillStyle="#000000";
ctx.fillRect(10,10,90,40);
console.log(ctx);
}
function line(){
var cv1 = document.getElementById('myCanvas');
var ctx = cv1.getContext('2d');
ctx.moveTo(100,50);
ctx.lineTo(200,100);
ctx.stroke();
}
function lingkaran(){
var cv1 = document.getElementById('myCanvas');
var ctx = cv1.getContext('2d');
ctx.beginPath();
ctx.arc(100,50,40,0,2*Math.PI);
ctx.stroke();
}
function text(){
var cv1 = document.getElementById('myCanvas');
var ctx = cv1.getContext('2d');
ctx.font='20px, arial';
ctx.fillStyle="#ffffff";
ctx.fillText('Persegi',20,20);
ctx.strokeText('Persegi',50,70);
}
</script>
</head>
<body >

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<p>
<ol>
<li><a href="javascript:persegi()">Persegi</a></li>
<li><a href="javascript:line()">Line</a></li>
<li><a href="javascript:lingkaran()">Lingkaran</a></li>
<li><a href="javascript:text()">Text</a></li>
</ol>
</body>
</html>

CANVAS

CANVAS – HTML 5

Pengertian Canvas

Membuat Canvas

CANVAS – HTML 5

Pengertian Canvas

Membuat Canvas

1 komentar:

Posting Komentar

Translate

MY KAMPUS

Popular posts

FANS PAGE

Q-bux

Probux

Blogger news

Archive

Pages

Mengenai Saya