Spesifikasi HTML5 memperkenalkan banyak fitur baru, salah satu yang paling menarik adalah elemen kanvas. HTML 5 Canvas menyediakan cara untuk menggambar grafik melalui JavaScript, yang mudah digunakan tetapi kuat. Setiap elemen kanvas memiliki konteks (konteks) (dianggap sebagai halaman pada papan gambar) di mana bentuk apa pun dapat ditarik. Browser mendukung beberapa konteks kanvas dan memberikan kemampuan menggambar grafis melalui API yang berbeda. Sebagian besar browser mendukung konteks kanvas 2D - termasuk Opera, Firefox, Konqueror dan Safari. Selain itu, beberapa versi opera juga mendukung kanvas 3D, dan Firefox juga dapat mendukung kanvas 3D melalui plug-in.
Artikel ini memperkenalkan dasar -dasar kanvas 2D dan cara menggunakan fungsi kanvas dasar seperti garis, bentuk, gambar, dan teks. Untuk memahami artikel ini, Anda lebih memahami dasar -dasar JavaScript.
Anda dapat mengklik di sini untuk mengunduh kode contoh dalam artikel ini dalam batch
| Hyperlink dalam contoh dalam artikel ini adalah semua halaman web HTML5. Saat ini, browser yang mendukung HTML5 termasuk Chrom, Firefox 3.6, dll. IE saat ini tidak mendukung HTML5, yang berarti Anda tidak dapat melihat hyperlink dalam beberapa contoh halaman ini menggunakan IE. |
Dasar -dasar Kanvas:
Metode untuk membuat kanvas sederhana, Anda hanya perlu menambahkan elemen <an Canvas> ke halaman HTML:
<Canvas ID = myCanvas width = 300 tinggi = 150>
Konten Fallback, jika browser tidak mendukung kanvas.
</ Canvas>
Untuk referensi elemen dalam JavaScript, yang terbaik adalah mengatur ID elemen; Anda juga perlu mengatur tinggi dan lebar kanvas.
Setelah kanvas dibuat, mari kita siapkan kuas. Untuk menggambar grafik di kanvas, Anda perlu menggunakan JavaScript. Pertama temukan elemen kanvas melalui fungsi GetElementById, dan kemudian inisialisasi konteksnya. Berbagai grafik kemudian dapat ditarik menggunakan API konteks. Script berikut menggambar persegi panjang di kanvas (klik di sini untuk melihat efeknya):
// Dapatkan referensi ke elemen.
var elem = document.geteLementById ('myCanvas');
// Selalu periksa properti dan metode, untuk memastikan kode Anda tidak rusak
// di browser lain.
if (elem && elem.getContext) {
// Dapatkan konteks 2D.
// Ingat: Anda hanya dapat menginisialisasi satu konteks per elemen.
var context = elem.getContext ('2d');
if (konteks) {
// kamu sudah selesai! Sekarang Anda dapat menggambar persegi panjang pertama Anda.
// Anda hanya perlu memberikan koordinat (x, y), diikuti dengan lebar dan
// Dimensi tinggi.
Context.Fillrect (0, 0, 150, 100);
}
}
Anda dapat menempatkan kode di atas di bagian kepala dokumen, atau dalam file eksternal.
API Konteks 2D:
Setelah memperkenalkan cara membuat kanvas, mari kita lihat API CANVAS 2D untuk melihat apa yang dapat dilakukan dengan fungsi -fungsi ini.
Baris Dasar:
Contoh di atas menunjukkan betapa mudahnya menggambar persegi panjang.
Properti fillstyle dan strokestyle dapat dengan mudah diatur untuk pengisian dan garis persegi panjang. Nilai warna digunakan sama dengan CSS: Hexadecimal Number, RGB (), RGBA (), dan HSLA. Fillrect dapat digunakan untuk menggambar persegi panjang dengan Fillrect. Gunakan Strokerect untuk menggambar persegi panjang dengan hanya perbatasan dan tanpa mengisi. Jika Anda ingin menghapus beberapa kanvas, Anda dapat menggunakan ClearRect. Parameter dari tiga metode di atas adalah sama: x, y, lebar, tinggi. Dua parameter pertama mengatur koordinat (x, y), dan dua parameter terakhir mengatur tinggi dan lebar persegi panjang. Anda dapat menggunakan properti linewidth untuk mengubah ketebalan garis. Mari kita lihat contoh menggunakan Fillrect, Strokerect ClearRect dan lainnya:
context.fillstyle = '#00f'; // biru
context.strokestyle = '#f00'; // merah
context.linewidth = 4;
// Gambarlah beberapa persegi panjang.
Context.Fillrect (0, 0, 150, 50);
Context.Strokerect (0, 60, 150, 50);
Context.Clearrect (30, 25, 90, 60);
Context.Strokerect (30, 25, 90, 60);
Contoh rendering ini ditunjukkan pada gambar berikut:
jalur:
Bentuk sewenang -wenang dapat ditarik melalui jalur kanvas (jalur). Anda dapat menggambar garis besar terlebih dahulu, lalu menggambar perbatasan dan mengisi. Membuat bentuk kustom sederhana, mulailah menggambar dengan beginpath () dan kemudian gambar gambar Anda dengan garis lurus, kurva, dan grafik lainnya. Setelah menggambar, hubungi isi dan stroke untuk menambahkan isi atau mengatur perbatasan. Hubungi ClosePath () untuk mengakhiri gambar grafik khusus. Berikut adalah contoh menggambar segitiga:
// Atur properti gaya.
context.fillstyle = '#00f';
context.strokestyle = '#f00';
context.linewidth = 4;
context.beginpath ();
// Mulai dari titik kiri atas.
Context.moveto (10, 10); // Berikan koordinat (x, y)
Context.lineto (100, 10);
Context.lineto (10, 100);
Context.lineto (10, 10);
// Selesai! Sekarang isi bentuknya, dan gambar stroke.
// Catatan: Bentuk Anda tidak akan terlihat sampai Anda memanggil salah satu dari dua metode.
context.fill ();
Context.stroke ();
context.closepath ();
Rendering ditunjukkan pada gambar berikut:
Contoh lain yang lebih kompleks menggunakan garis lurus, kurva, dan busur.
Masukkan gambar:
Metode DrawImage memungkinkan memasukkan gambar lain (elemen IMG dan kanvas) di kanvas. Di Opera, Anda dapat menggambar grafik SVG di kanvas. Metode ini lebih rumit dan dapat memiliki 3, 5 atau 9 parameter
3 Parameter: Metode paling dasar menggunakan drawImage. Satu parameter menentukan posisi gambar, dan dua parameter lainnya menentukan posisi gambar dalam kanvas.
5 Parameter: Metode Penggunaan DrawImage Menengah, termasuk 3 parameter yang disebutkan di atas, tambahkan dua parameter untuk menunjukkan lebar dan tinggi sisipan (jika Anda ingin mengubah ukuran gambar).
9 Parameter: DrawImage yang paling kompleks adalah metode penggunaan campuran, termasuk 5 parameter di atas, dan 4 parameter lainnya mengatur posisi dan lebar tinggi pada gambar sumber. Parameter ini memungkinkan Anda untuk secara dinamis memotong gambar sumber sebelum menampilkannya.
Berikut adalah tiga contoh metode penggunaan di atas:
// Tiga argumen: elemen, tujuan (x, y) koordinat.
context.drawimage (img_elem, dx, dy);
// Lima Argumen: Koordinat Elemen, Tujuan (X, Y)
// Lebar dan Tinggi (jika Anda ingin mengubah ukuran gambar sumber).
context.drawimage (img_elem, dx, dy, dw, dh);
// sembilan argumen: elemen, sumber (x, y) koordinat, lebar sumber dan
// Tinggi (untuk tanam), koordinat tujuan (x, y), dan lebar tujuan
// dan tinggi (ubah ukuran).
context.drawimage (img_elem, sx, sy, sw, sh, dx, dy, dw, dh);
Efeknya ditunjukkan pada gambar di bawah ini:
Operasi tingkat piksel:
API Konteks 2D menyediakan tiga metode untuk operasi tingkat piksel: CreateMagedata, GetImagedata, dan putimageData. Objek Imagedata menyimpan nilai piksel gambar. Setiap objek memiliki tiga properti: lebar, tinggi, dan data. Jenis atribut data adalah CanvaspixElarray, yang digunakan untuk menyimpan lebar*tinggi*4 nilai piksel. Setiap piksel memiliki nilai RGB dan nilai alfa transparansi (nilainya 0 hingga 255, termasuk Alpha!). Urutan piksel disimpan dari kiri ke kanan, dari atas ke bawah, berdasarkan baris. Untuk lebih memahami prinsipnya, mari kita lihat contoh - gambar persegi panjang merah:
// Buat objek Imagedata.
var imgd = context.createImagedata (50,50);
var pix = imgd.data;
// Lingkarkan di setiap piksel dan atur merah transparan.
untuk (var i = 0; n = pix.length, i <n; i += 4) {
pix [i] = 255; // saluran merah
pix [i+3] = 127; // Saluran Alpha
}
// Gambarlah objek Imagedata pada koordinat (x, y) yang diberikan.
Context.putimageData (IMGD, 0,0);
Catatan: Tidak semua browser menerapkan CreateMagedata. Pada browser yang didukung, objek Imagedata perlu diperoleh melalui metode getImagedata. Silakan merujuk ke kode sampel.
Imagedata dapat digunakan untuk menyelesaikan banyak fungsi. Misalnya, filter gambar dapat diimplementasikan, atau visualisasi matematika dapat diimplementasikan (seperti fraktal dan efek khusus lainnya). Efek khusus berikut menerapkan filter inversi warna sederhana:
// Dapatkan canvaspixelarray dari koordinat dan dimensi yang diberikan.
var imgd = context.getImagedata (x, y, lebar, tinggi);
var pix = imgd.data;
// Lingkarkan di setiap piksel dan balikkan warnanya.
untuk (var i = 0, n = pix.length; i <n; i += 4) {
pix [i] = 255 - pix [i]; // merah
pix [i+1] = 255 - pix [i+1]; // hijau
pix [i+2] = 255 - pix [i+2]; // biru
// i+3 adalah alpha (elemen keempat)
}
// Gambarlah imagedata pada koordinat (x, y) yang diberikan.
context.putimageData (imgd, x, y);
Gambar berikut menunjukkan efek setelah menggunakan filter ini:
Kata:
Meskipun versi WebKit baru -baru ini dan Firefox 3.1 Build Nightly baru saja mulai mendukung API teks, untuk memastikan integritas artikel, saya memutuskan untuk tetap memperkenalkan API teks di sini.
Properti teks berikut dapat diatur dalam objek konteks:
Font: Font Teks, Sama seperti atribut CSSFont-Family
TextAlign: Penyelarasan Horizontal Teks. Nilai Atribut yang Diinginkan: Mulai, Akhir, Kiri, Kanan, Tengah. Nilai default: Mulai.
TextBaseline: Penyelarasan Vertikal Teks. Nilai atribut yang diinginkan: atas, gantung, tengah, alfabet, ideografi, bawah. Nilai default: Alpabet
Ada dua cara untuk menggambar teks: FillText dan StrokeText. Yang pertama menggambar teks dengan fillstyle fill, yang terakhir menggambar teks dengan hanya perbatasan strokestyle. Parameter keduanya sama: teks yang akan ditarik dan posisi (x, y) koordinat teks. Ada juga opsi opsional - lebar maksimum. Jika diperlukan, browser mengurangi teks agar sesuai dengan lebar yang ditentukan. Atribut penyelarasan teks mempengaruhi posisi relatif teks ke koordinat set (x, y).
Berikut adalah contoh menggambar teks Hello World di kanvas:
context.fillstyle = '#00f';
context.font = 'Italic 30px sans-serif';
context.textBaseline = 'top';
Context.FillText ('Hello World!', 0, 0);
context.font = 'tebal 30px sans-serif';
Context.stroketext ('Hello World!', 0, 50);
Gambar berikut adalah renderingnya:
bayangan:
Saat ini hanya Konqueror dan Firefox 3.1 Nightly Build Mendukung API Bayangan. Properti API adalah:
Shadowcolor: Warna bayangan. Nilainya konsisten dengan nilai warna CSS.
Shadowblur: Mengatur derajat Shadow Blur. Semakin besar nilai ini, semakin buramnya bayangan. Efeknya sama dengan filter fuzzy Gaussian Photoshop.
Shadowoffsetx dan ShadowOffsety: Offset X dan Y dari bayangan, dalam piksel.
Berikut adalah contoh bayangan kanvas:
context.shadowoffsetx = 5;
context.shadowoffsety = 5;
context.shadowblur = 4;
Context.ShadowColor = 'RGBA (255, 0, 0, 0.5)';
context.fillstyle = '#00f';
Context.Fillrect (20, 20, 150, 100);
Efeknya ditunjukkan pada gambar di bawah ini:
Gradien Warna:
Selain warna CSS, properti fillstyle dan strokestyle dapat diatur ke objek canvasgradient. Gradien -colour dapat digunakan untuk saluran dan pengisian melalui Canvasgradient. Untuk membuat objek Canvasgradient, Anda dapat menggunakan dua metode: CreateLineArgradient dan CreateradialGradient. Yang pertama menciptakan gradien warna linier, dan yang terakhir menciptakan gradien warna melingkar. Setelah membuat objek gradien warna, Anda dapat menggunakan metode AddColorstop dari objek untuk menambahkan nilai intermediate warna. Kode berikut menunjukkan cara menggunakan gradien warna:
// Anda perlu menyediakan koordinat sumber dan tujuan (x, y)
// untuk gradien (dari tempat dimulai dan di mana ia berakhir).
var gradient1 = context.createLineArgradient (sx, sy, dx, dy);
// Sekarang Anda dapat menambahkan warna dalam gradien Anda.
// Argumen pertama menceritakan posisi untuk warna dalam gradien Anda. Itu
// Kisaran nilai yang diterima adalah dari 0 (gradien start) hingga 1 (gradien end).
// Argumen kedua menceritakan warna yang Anda inginkan, menggunakan format warna CSS.
gradient1.addcolorstop (0, '#f00'); // merah
gradient1.addcolorstop (0,5, '#ff0'); // kuning
gradient1.addcolorstop (1, '#00f'); // biru
// Untuk gradien radial Anda juga perlu menyediakan sumber
// dan jari -jari lingkaran tujuan.
// Koordinat (x, y) menentukan titik pusat lingkaran (mulai dan
// tujuan).
var gradient2 = context.createradialGradient (SX, SY, SR, DX, DY, DR);
// Menambahkan warna ke gradien radial sama dengan menambahkan warna ke linier
// gradien.
Saya juga menyiapkan contoh yang lebih kompleks menggunakan gradien warna linier, bayangan, dan teks.
Efeknya ditunjukkan pada gambar di bawah ini:
Demo kanvas:
Jika Anda ingin tahu apa yang dapat Anda lakukan dengan kanvas, silakan merujuk ke proyek berikut:
Widget Opera:
Simaquarium
Buku Sketsa Artis
Spirograf
Rekayasa dan Demonstrasi Online:
Newton Polinomial
Canvascape - Walker 3D
Paint.web - Demo Lukisan, Sumber Terbuka
Penerbangan Lapangan Bintang
Gumpalan interaktif
Ayat:
Canvas adalah salah satu fitur HTML 5 yang paling dinanti dan saat ini didukung oleh sebagian besar browser Web. Kanvas dapat membantu membuat game dan meningkatkan antarmuka pengguna grafis. Konteks 2D
API menyediakan banyak kemampuan menggambar grafis - Saya harap Anda telah belajar tentang menggunakan kanvas melalui artikel ini dan Anda tertarik untuk belajar lebih banyak!