masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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

7.jpg


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 标签。
</canvas>
</body>
</html>

Hasil menjalankan program:

Contoh analisis:

1.jpgMula-mula, cari elemen <kanvas>:

var c=document.getElementById ("myCanvas");

Kemudian, cipta objek konteks:

var ctx=c.getContext( " 2d");

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);

Tetapkan 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.

Koordinat Kanvas

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 标签。
</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:

8.jpg

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 标签。</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:

4.jpg

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 标签。</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:

8.jpg

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 标签。</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:

3.jpg

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 标签。</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    // 创建渐变
    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:

5.jpg

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

7.jpg

Instance

Letakkan imej Pada kanvas: 

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。</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:

1.jpg

HTML Manual Rujukan Kanvas

Untuk atribut lengkap teg, sila rujuk Manual Rujukan Kanvas.

HTML <kanvas> 标签

   
     标签     描述
     <canvas>HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
 标签


     

< span style="font-size: 16px;">描述<🎜><🎜>
     <canvas>HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
<🎜><🎜><🎜>
Meneruskan pembelajaran
||
<!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 标签。</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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492418 permainan