5 Spesifikasi memperkenalkan banyak fitur baru, salah satu yang paling menarik adalah elemen canvas . HTML5 canvas menyediakan cara untuk menggambar grafik melalui JavaScript, yang mudah digunakan tetapi kuat. Setiap elemen canvas memiliki konteks (konteks) (dianggap sebagai halaman pada papan gambar) di mana bentuk apa pun dapat ditarik. Browser mendukung beberapa konteks kanvas dan menyediakan fungsi gambar grafis melalui yang berbeda. Menyediakan fungsi gambar grafis. 5 Spesifikasi memperkenalkan banyak fitur baru, salah satu yang paling menarik adalah elemennya. HTML5 menyediakan metode untuk menggambar grafik melalui JavaScript, yang mudah digunakan tetapi kuat. Setiap elemen memiliki konteks (konteks) (pikirkan sebagai halaman pada papan gambar) di mana bentuk apa pun dapat ditarik. Browser mendukung beberapa konteks kanvas dan menyediakan fungsi gambar grafis melalui 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 konteks
Artikel ini memperkenalkan kanvas 2D
Dasar -dasar 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
Metode untuk membuat kanvas sangat sederhana, Anda hanya perlu menambahkan elemen <canvas> ke halaman HTML:
<canvas id=mycanvas width=300 height=150>fallback content, in case the browser does not support canvas.</canvas>Untuk dapat merujuk elemen dalam JavaScript, yang terbaik adalah mengatur ID untuk elemen; Ini juga perlu mengatur tinggi dan lebar untuk kanvas.
Setelah kanvas dibuat, mari kita siapkan kuas. Untuk menggambar grafik di kanvas, Anda perlu menggunakan JavaScript. Pertama temukan kanvas melalui fungsi getelementbyid
elemen, lalu inisialisasi konteksnya. Berbagai grafik dapat diambil kemudian menggunakan API konteks. Script berikut menggambar persegi panjang di kanvas (klik di sini untuk melihat efeknya):
// get a reference to the element.var elem = document.getelementbyid('mycanvas');// always check for properties 和methods, to make sure your code doesn't break // in other browsers.if (elem && elem.getcontext) { // get the 2d context. // remember: you can only initialize one context per element. var context = elem.getcontext('2d'); if (context) { // you are done! now you can draw your first rectangle. // you only need to provide the (x,y) coordinates, followed by the width and // height dimensions. context.fillrect(0, 0, 150, 100); }} Anda dapat menempatkan kode di atas di bagian head dokumen, atau dalam file eksternal.
Setelah memperkenalkan cara membuat kanvas, mari kita lihat API Canvas 2D dan lihat apa yang dapat dilakukan dengan fungsi -fungsi ini.
Contoh di atas menunjukkan betapa mudahnya menggambar persegi panjang.
Properti fillstyle dan strokestyle dapat dengan mudah diatur untuk pengisian dan garis persegi panjang. Metode penggunaan nilai warna dan angka heksadesimal, (), () dan () (jika browser mendukungnya, seperti opera
10 dan Firefox 3). () (Jika browser mendukungnya, seperti Opera10 dan Firefox 3). () dan () (jika browser mendukungnya, seperti Opera10 dan Firefox 3). (), () dan () (jika browser mendukungnya, seperti Opera10 dan Firefox 3). Nomor heksadesimal, (), () dan () (jika didukung oleh browser, seperti Opera10 dan Firefox 3).
fillrect dapat digunakan untuk menggambar persegi panjang. 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 atribut linewidth untuk mengubah ketebalan garis. Mari kita lihat apakah fillrect digunakan,
strokerect clearrect dan contoh lainnya:
context.fillstyle = '#00f'; // bluecontext.strokestyle = '#f00'; // redcontext.linewidth = 4;// draw some rectangles.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 1.
Gambar 1: Fillrect, Strokerect dan
Diagram Efek ClearRect
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 fill dan stroke untuk menambahkan isi atau mengatur perbatasan. Hubungi closepath() untuk mengakhiri gambar grafik khusus.
Berikut adalah contoh menggambar segitiga:
// set the style properties.context.fillstyle = '#00f';context.strokestyle = '#f00';context.linewidth = 4;context.beginpath();// start from the top-left point.context.moveto(10, 10); // give the (x,y) coordinatescontext.lineto(100, 10);context.lineto(10, 100);context.lineto(10, 10);// done! now fill the shape, 和draw the stroke.// note: your shape will not be visible until you call any of the two methods.context.fill();context.stroke();context.closepath();Rendering ditunjukkan pada Gambar 2.
Gambar 2: Segitiga
Contoh lain yang lebih bertanggung jawab menggunakan garis lurus, kurva, dan busur.
Metode drawimage memungkinkan memasukkan gambar lain ke dalam kanvas
(Elemen img dan canvas ). Di operator, Anda dapat menggambar grafik SVG di kanvas. Metode ini cukup kompleks dan dapat memiliki 3, 5 atau 9 parameter:
drawimage . Satu parameter menentukan posisi gambar, dan dua parameter lainnya menentukan posisi gambar dalam kanvas.drawimage Menengah, termasuk 3 parameter yang disebutkan di atas, tambahkan dua parameter untuk menunjukkan lebar dan tinggi sisipan (jika Anda ingin mengubah ukuran gambar).drawimage yang paling kompleks, 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:
// three arguments: the element, destination (x,y) coordinates.context.drawimage( img_elem , dx , dy );// five arguments: the element, destination (x,y) coordinates, and destination // width and height (if you want to resize the source image).context.drawimage( img_elem , dx , dy , dw , dh );// nine arguments: the element, source (x,y) coordinates, source width and // height (for cropping), destination (x,y) coordinates, and destination width // and height (resize).context.drawimage( img_elem , sx , sy , sw , sh , dx , dy , dw , dh );Efeknya ditunjukkan pada Gambar 3.
Gambar 3: drawimage Rendering.
API Konteks 2D menyediakan tiga metode untuk operasi tingkat piksel: createimagedata , 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 width * height *4 nilai piksel. Setiap piksel memiliki nilai RGB dan nilai alfa transparansi (nilainya adalah 0 untuk
255, termasuk Alpha!). Urutan piksel disimpan dari kiri ke kanan, dari atas ke bawah, berdasarkan baris.
Untuk lebih memahami prinsipnya, mari kita lihat contoh - menggambar persegi panjang merah
// create an imagedata object.var imgd = context.createimagedata(50,50);var pix = imgd.data;// loop over each pixel 和set a transparent red.for (var i = 0; n = pix.length, i < n; i += 4) { pix[i ] = 255; // red channel pix[i+3] = 127; // alpha channel}// draw the imagedata object at the given (x,y) coordinates.context.putimagedata(imgd, 0,0); Catatan: Tidak semua browser menerapkan createimagedata . Pada browser yang didukung, objek imagedata perlu diperoleh melalui metode getimagedata . Silakan merujuk ke kode sampel.
Banyak fungsi dapat dicapai melalui imagedata . Misalnya, filter gambar dapat diimplementasikan, atau visualisasi matematika dapat diimplementasikan (seperti fraktal dan efek khusus lainnya). Efek khusus berikut menerapkan filter inversi warna sederhana:
// get the canvaspixelarray from the given coordinates and dimensions.var imgd = context.getimagedata( x , y , width , height );var pix = imgd.data;// loop over each pixel and invert the color.for (var i = 0, n = pix.length; i < n; i += 4) { pix[i ] = 255 - pix[i ]; // red pix[i+1] = 255 - pix[i+1]; // green pix[i+2] = 255 - pix[i+2]; // blue // i+3 is alpha (the fourth element)}// draw the imagedata at the given (x,y) coordinates.context.putimagedata(imgd, x , y );Gambar 4 menunjukkan opera setelah menggunakan filter ini
Gambar (Gambar 3 adalah gambar asli).
Gambar 4: Filter inversi warna
Meskipun versi WebKit baru -baru ini dan Firefox 3.1 Build Nightly hanya mulai mendukung API teks, untuk memastikan integritas artikel, saya memutuskan untuk tetap memperkenalkan API teks di sini.
Properti teks berikut dapat diatur dalam objek context :
font : Font teks, sama atribut atribut font-family
textalign : Penyelarasan Horizontal Teks. Nilai Atribut yang Diinginkan: start , end , left , right , center . Nilai default:
start .
textbaseline : Penyelarasan Vertikal Teks. Nilai atribut yang diinginkan: top , hanging , middle , alphabetic , ideographic , bottom . Nilai default: alphabetic .
Ada dua cara untuk menggambar teks: filltext dan stroketext . Yang pertama menggambar teks dengan fillstyle fill, yang terakhir menggambar teks dengan hanya perbatasan gaya stroke . 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 Teks dan Pengaturan
(x, y) Posisi relatif koordinat.
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 = 'bold 30px sans-serif';context.stroketext('hello world!', 0, 50);Gambar 5 adalah renderingnya.
Gambar 5: Efek teks
Saat ini hanya Konqueror dan Firefox 3.1 Nightly Build Shadows Shadows API. 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 di Photoshop.shadowoffsetx dan shadowoffsety : Offset X dan Y Shadow, 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 6.
Gambar 6: Efek bayangan kanvas - persegi panjang biru, bayangan merah
Selain warna CSS, properti fillstyle dan strokestyle dapat diatur ke objek canvasgradient . - canvasgradient dapat menggunakan gradien warna untuk garis dan pengisian.
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:
// you need to provide the source 和destination (x,y) coordinates // for the gradient (from where it starts 和where it ends).var gradient1 = context.createlineargradient( sx , sy , dx , dy );// now you can add colors in your gradient.// the first argument tells the position for the color in your gradient. the // accepted value range is from 0 (gradient start) to 1 (gradient end).// the second argument tells the color you want, using the css color format.gradient1.addcolorstop(0, '#f00'); // redgradient1.addcolorstop(0.5, '#ff0'); // yellowgradient1.addcolorstop(1, '#00f'); // blue// for the radial gradient you also need to provide source// 和destination circle radius.// the (x,y) coordinates define the circle center points (start 和// destination).var gradient2 = context.createradialgradient( sx , sy , sr , dx , dy , dr );// adding colors to a radial gradient is the same as adding colors to linear // gradients.Saya juga menyiapkan contoh yang lebih kompleks menggunakan gradien warna linier, bayangan, dan teks. Efeknya ditunjukkan pada Gambar 7.
Gambar 7: Contoh menggunakan gradien warna linier
Jika Anda ingin tahu apa yang dapat Anda lakukan dengan kanvas, silakan merujuk ke proyek berikut:
buku skets
demo, open-source
penerbangan
Canvas adalah salah satu fitur HTML5 yang paling dinanti dan telah 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 penggunaan kanvas melalui artikel ini dan Anda tertarik untuk belajar lebih banyak!