HTML5 Canvas
<Canvas> grafis tag kustom, seperti grafik dan gambar lain, Anda harus menggunakan script untuk menggambar grafik.
Di kanvas (kanvas) menggambar persegi panjang merah, persegi panjang gradien, persegi panjang berwarna, dan beberapa teks berwarna.
Apa Canvas?
HTML5 <canvas> elemen digunakan untuk menggambar grafik menggunakan scripting (biasanya JavaScript) untuk menyelesaikan.
<Canvas> tag adalah wadah grafis, Anda harus menggunakan script untuk menggambar grafik.
Anda dapat menggunakan Canva menggambar jalur, kotak, lingkaran, karakter, dan menambahkan gambar melalui berbagai metode.
Dukungan Browser
Internet Explorer 9 +, Firefox, Opera, Chrome, dan dukungan Safari <canvas> elemen.
Catatan: Internet Explorer 8 dan versi sebelumnya dari browser IE tidak mendukung <canvas> elemen.
Buat kanvas (kanvas)
Sebuah halaman kanvas adalah persegi panjang ditarik melalui <canvas> elemen.
Catatan: Secara default, <canvas> elemen memiliki perbatasan dan konten.
<Canvas> Contoh sederhana adalah sebagai berikut:
Catatan: Label biasanya perlu menentukan atribut id (script sering dikutip), ukuran, lebar dan tinggi atribut menentukan kanvas.
Tip: Anda dapat menggunakan beberapa <canvas> elemen dalam halaman HTML.
Menggunakan atribut style menambahkan perbatasan:
contoh
style="border:1px solid #000000;">
</canvas>
Coba »
Gunakan JavaScript untuk menggambar grafik
kanvas elemen itu sendiri tidak mengambil daya. Semua pekerjaan harus ditarik dalam JavaScript dilakukan secara internal:
contoh
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Coba »
contoh analisis:
Pertama, menemukan <canvas> elemen:
Kemudian, membuat objek konteks:
getContext ( "2d") objek adalah built-in HTML5 objek memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, karakter, dan menambahkan gambar.
Berikut dua baris kode untuk menggambar persegi panjang merah:
ctx.fillRect(0,0,150,75);
Pengaturan properti fillStyle bisa menjadi warna CSS, gradien, atau pola. Pengaturan standar fillStyle adalah # 000000 (hitam).
fillRect (x, y, lebar,tinggi) metode mendefinisikan sebuah persegi panjang diisi dengan metode saat ini.
koordinat kanvas
kanvas adalah grid dua dimensi.
kanvas atas koordinat sudut kiri (0,0)
Metode di atas memiliki parameter fillRect (0,0,150,75).
Ini berarti: Menggambar 150x75 persegi panjang di kanvas dari sudut kiri atas (0,0).
Contoh koordinat
Seperti ditunjukkan di bawah, X dan Y koordinat dari kanvas pada kanvas untuk penentuan posisi lukisan. Pergerakan persegi panjang mouse, koordinat lokasi display.
Canvas - Jalur
Pada garis lukisan kanvas, kita akan menggunakan dua metode berikut:
- moveTo(x, y) koordinat menentukan garis dimulai
- lineTo(x, y) koordinat untuk mendefinisikan akhir baris
Menarik garis kita harus menggunakan "tinta" metode, seperti stroke ().
contoh
Menentukan mulai koordinat (0,0), dan koordinat akhir (200, 100) dan kemudian menggunakan metode stroke () untuk menarik garis:
JavaScript:
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Coba »
Menggambar lingkaran di kanvas, kita akan menggunakan metode berikut:
- arc (x, y, r, start, stop)
Bahkan, kami menggunakan pendekatan "tinta" ketika menggambar lingkaran, seperti stroke () atau mengisi ().
contoh
Gunakan busur () metode untuk menggambar sebuah lingkaran:
JavaScript:
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Coba »
Canvas - Teks
Gunakan kanvas untuk menggambar teks, sifat penting dan metode sebagai berikut:
- Font - mendefinisikan font
- fillText (teks, x, y)- Menggambar teks yang solid di atas kanvas
- strokeText (teks, x, y)- menggambar di atas kanvas teks berongga
Gunakan fillText ():
contoh
Gunakan "Arial" font rendering teks 30px tinggi (padat) di kanvas:
JavaScript:
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
Coba »
Gunakan strokeText ():
contoh
Gunakan "Arial" font rendering teks 30px tinggi (berongga) di atas kanvas:
JavaScript:
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
Coba »
Canvas - Gradient
Gradient dapat diisi persegi panjang, lingkaran, garis, teks, dll, berbagai bentuk dapat menentukan berbagai warna.
Berikut adalah dua cara yang berbeda untuk mengatur Canvas Gradient:
- createLinearGradient (x, y, x1,y1) - Buat gradien garis
- createRadialGradient (x, y, r,x1, y1, r1) - Buat radial / melingkar gradien
Ketika kita menggunakan benda gradien, Anda harus menggunakan dua atau lebih berhenti warna.
addColorStop () metode untuk menentukan berhenti warna, penggunaan koordinat untuk menggambarkan parameter yang dapat 0-1.
Menggunakan Gradient pengaturan fillStyle atau strokeStyle nilai gradien, dan kemudian menggambar bentuk, seperti persegi panjang, teks, atau garis.
Gunakan createLinearGradient ():
contoh
Buat gradien linier. Gunakan gradien mengisi persegi panjang:
JavaScript:
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);
Coba »
Gunakan createRadialGradient ():
contoh
Buat radial / melingkar gradien. Gunakan mengisi gradien persegi panjang:
JavaScript:
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);
Coba »
Canvas - Images
Satu gambar ke kanvas, menggunakan metode berikut:
- drawImage(gambar, x, y)
Menggunakan gambar:
contoh
gambar ditempatkan pada kanvas:
JavaScript:
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
Coba »
Pedoman HTML Canvas Referensi
properti lengkap dari label dapat merujuk pengguna Canvas referensi.
HTML <canvas> Tag
Tag | 描述 |
---|---|
<canvas> | HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 |