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 标签。
</canvas>
</body>
</html>
Hasil menjalankan program:
Contoh analisis:
Mula-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:
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:

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:

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:
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:
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中文网(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:
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

fail baharu

<!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>

serahkan Tetapkan Semula Kod

Operasi automatik