HTML5 Kanvas
Apakah itu Kanvas?
elemen HTML5 <kanvas> digunakan untuk melukis grafik, yang dilakukan melalui skrip (biasanya JavaScript).
Lukis segi empat tepat merah, segi empat tepat kecerunan, segi empat tepat berwarna dan beberapa teks berwarna pada kanvas. Teg
<kanvas> hanyalah bekas untuk grafik, anda perlu menggunakan skrip untuk melukis grafik.
Anda boleh menggunakan Canva untuk melukis laluan, kotak, bulatan, aksara dan menambah imej dalam pelbagai cara.
Sokongan penyemak imbas
Internet Explorer 9+, Firefox, Opera, Chrome dan Safari menyokong elemen <kanvas>
Nota: Internet Explorer 8 dan lebih awal. IE versi penyemak imbas tidak menyokong elemen <kanvas> pada halaman web Di tengah ialah kotak segi empat tepat, dilukis melalui elemen <kanvas>
Nota: Secara lalai, elemen <kanvas> <canvas>Contoh mudah adalah seperti berikut:
<canvas id="myCanvas" width="200" height="100">< ;/canvas> ;Nota
: Teg biasanya perlu menentukan atribut id (selalunya dirujuk dalam skrip), dan atribut lebar dan ketinggian menentukan saiz kanvas.Petua: Anda boleh menggunakan berbilang elemen <kanvas> ??>Jalankan atur cara dan cuba
Gunakan JavaScript untuk melukis imej
Elemen kanvas itu sendiri tidak mempunyai keupayaan melukis. Semua kerja lukisan mesti dilakukan di dalam JavaScript: Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #28c9b6;"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。 </canvas> </body> </html>Hasil menjalankan program:
Contoh analisis:
Mula-mula, cari elemen <kanvas>:
var c=document.getElementById ("myCanvas");
var ctx=c.getContext( " 2d");Kemudian, cipta objek konteks:
getContext("2d") objek ialah objek HTML5 terbina dalam dengan pelbagai laluan lukisan, segi empat tepat, bulatan, aksara, dan penambahan Kaedah imej.
Dua baris kod berikut melukis segi empat tepat merah:ctx.fillStyle="#FF0000";
ctx.fillRect(0, 0,150,75);Koordinat KanvasTetapkan sifat fillStyle kepada warna, kecerunan atau corak CSS. Tetapan lalai untuk fillStyle ialah #000000 (hitam).
kaedah fillRect(x,y,width,height) mentakrifkan kaedah pengisian semasa bagi segi empat tepat.kanvas ialah grid dua dimensi. Koordinat sudut kiri atas kanvas ialah (0,0)Kaedah fillRect di atas mempunyai parameter (0,0,150,75).
Bermaksud: Lukiskan segi empat tepat 150x75 pada kanvas, bermula dari sudut kiri atas (0,0).
Contoh Koordinat
Seperti yang ditunjukkan di bawah, koordinat X dan Y bagi kanvas digunakan untuk meletakkan lukisan pada kanvas. Koordinat kedudukan dipaparkan pada bingkai segi empat tepat di mana tetikus bergerak.
Kanvas - Laluan
Untuk melukis garisan pada Kanvas, kami akan menggunakan dua kaedah berikut:
moveTo(x ,y) Takrifkan barisMulakan koordinat
lineTo(x,y) Define lineTamat koordinat
Untuk melukis garisan kita mesti menggunakan kaedah "dakwat", sama seperti pukulan().
Instance
Tentukan koordinat mula ( 0,0), dan koordinat akhir (200,100) Kemudian gunakan kaedah lejang() untuk melukis garisan:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。 </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script> </body> </html>Hasil berjalan program:
Untuk melukis bulatan dalam kanvas, kami akan menggunakan kaedah berikut:
arka(x,y,r) ,mula,berhenti)
Malah, kami menggunakan kaedah "dakwat" semasa melukis bulatan, seperti stroke() atau isi().
Contoh
Gunakan kaedah arc() untuk melukis bulatan:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d31029;"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script> </body> </html>Hasil berjalan program:
Kanvas - Teks
Gunakan kanvas untuk melukis teks Sifat dan kaedah penting adalah seperti berikut:
font -. Takrifkan fon
fillTeks(teks,x,y) - Lukiskan teks pepejal pada kanvas
StrokeText(teks,x,y) - Lukis teks kosong pada kanvas
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #1d17ff;"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script> </body> </html>Hasil berjalan program:
Kanvas - Kecerunan
Kecerunan boleh mengisi segi empat tepat, bulatan, garisan, teks, dll., pelbagai bentuk boleh disesuaikan Tentukan warna yang berbeza.
Terdapat dua cara berbeza untuk menetapkan kecerunan Kanvas:
createLinearGradient(x,y,x1,y1) - Buat kecerunan garis
createRadialGradient(x,y,r,x1,y1,r1) - Buat kecerunan jejari/bulatan
Apabila kita menggunakan objek kecerunan, kita mesti menggunakan dua atau dua warna Stop di atas.
addColorStop()Kaedah menentukan hentian warna Parameter diterangkan mengikut koordinat, yang boleh menjadi 0 hingga 1.
Gunakan kecerunan, tetapkan nilai fillStyle. atau strokeGaya ke kecerunan, Kemudian lukis bentuk, seperti segi empat tepat, teks atau garisan.
Instance
Gunakan createLinearGradient() untuk mencipta kecerunan linear. Gunakan kecerunan untuk mengisi segi empat tepat:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,30); ctx.strokeText("你好嗎！",10,80); </script> </body> </html>Hasil larian program:
Contoh
Gunakan createRadialGradient() untuk mencipta kecerunan jejari/bulatan. Isikan segi empat tepat dengan kecerunan:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // 創(chuàng)建漸變 var grd=ctx.createLinearGradient(0,0,200,10); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // 充滿度 ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); </script> </body> </html>Hasil berjalan program:
Kanvas - Imej
Anda boleh meletakkan gambar pada kanvas, supaya anda boleh melakukan beberapa operasi pada gambar dan menambah beberapa bahan yang anda inginkan, seperti teks.
Letakkan imej pada kanvas Gunakan kaedah berikut:
drawImage(imej,x,y)
Gunakan imej
Instance
Letakkan imej Pada kanvas:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas> <script> var c=document.getElementById("myCanvas"); 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); </script> </body> </html>Hasil larian program:
HTML Manual Rujukan Kanvas
Untuk atribut lengkap teg, sila rujuk Manual Rujukan Kanvas.
HTML <kanvas> 標(biāo)簽
? ? ?標(biāo)簽
標(biāo)簽 描述 <canvas> HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁(yè)上繪制圖像。
? ? ?< span style="font-size: 16px;">描述 ? ? ?<canvas> HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁(yè)上繪制圖像。
