Pemrograman HTML5 Canvas API

Penulis：Eve Cole Waktu Pembaruan：2025-04-04 20:48:02

mencoba

{

document.createElement ("Canvas"). GetContext ("2D");

document.geteLementById ("dukungan"). innerHtml = "ok";

}

Tangkap (E)

{

document.geteLementById ("dukungan"). innerHtml = e.message;

}

</script>

Bergabunglah dengan kanvas

// Dapatkan elemen kanvas dan konteks gambarnya var canvas = document.geteLementById ("diagonal");

var context = canvas.getContext ("2d");

// Buat jalur dengan koordinat absolut

context.beginpath ();

Context.moveto (70, 140);

Context.lineto (140, 70);

// Gambarlah garis ini di atas kanvas

Context.stroke ();

Mengubah

Efek yang sama seperti di atas dapat dicapai melalui transformasi (penskalaan, terjemahan, rotasi), dll.

Gambarlah garis diagonal dengan transformasi

// Dapatkan elemen kanvas dan konteks menggambarnya

var canvas = document.geteLementById ("diagonal");

var context = canvas.getContext ("2d");

// Simpan status gambar saat ini

Context.Save ();

// Pindahkan konteks gambar ke kanan bawah

Context.translate (70, 140);

// Gambar segmen garis yang sama dengan yang sebelumnya dengan asal sebagai titik awal

context.beginpath ();

Context.moveto (0, 0);

Context.lineto (70, -70);

Context.stroke (); Context.Restore ();

jalur

Jalur di HTML5 Canvas API mewakili bentuk apa pun yang ingin Anda render.

BeginPath (): Tidak peduli grafik apa pun yang Anda mulai gambar, hal pertama yang perlu Anda hubungi adalah Beginpath. Fungsi sederhana ini tidak mengambil parameter dan digunakan untuk memberi tahu Canvas bahwa ini akan mulai menggambar grafik baru.

MOVETO (X, Y): Tidak ada gambar, pindahkan posisi saat ini ke koordinat target baru (x, y).

Lineto (x, y): Tidak hanya memindahkan posisi saat ini ke koordinat target baru (x, y), tetapi juga menarik garis lurus antara dua koordinat.

ClosePath (): Fungsi ini berperilaku sangat mirip lineto. Satu -satunya perbedaan adalah bahwa ClosePath akan secara otomatis menggunakan koordinat awal jalur sebagai koordinat target. Ini juga menginformasikan kanvas bahwa angka yang saat ini ditarik telah ditutup atau telah membentuk area yang sepenuhnya tertutup, yang sangat berguna untuk pengisian dan stroke di masa depan.

Gambarlah kanopi pohon pinus

fungsi createCanopypath (konteks) {

// Gambarlah kanopi pohon

context.beginpath (); Context.moveto (-25, -50);

Context.lineto (-10, -80);

context.lineto (-20, -80);

context.lineto (-5, -110);

context.lineto (-15, -110); // vertex dari pohon

context.lineto (0, -140); Context.lineto (15, -110);

Context.lineto (5, -110);

Context.lineto (20, -80);

Context.lineto (10, -80);

Context.lineto (25, -50);

// Sambungkan titik awal dan tutup jalur

context.closepath ();

} function drawtrails () {

var canvas = document.getElementById ('diagonal');

var context = canvas.getContext ('2d'); context.save ();

Context.translate (130, 250); // Buat jalur yang mengekspresikan kanopi

createCanopyPath (konteks); // gambar jalur saat ini

Context.stroke ();

Context.Restore ();

} window.addeventListener ("muat", drawtrails, true);

Gaya stroke

Mode stroke memungkinkan kanopi terlihat lebih realistis.

// lebar garis

context.linewidth = 4;

// Titik persimpangan dari jalur halus

context.lineJoin = 'round';

//warna

Context.strokestyle = '#663300';

// Gambar jalur saat ini

Context.stroke ();

Isi Gaya

context.fillstyle = #339900; context.fill (); menggambar persegi panjang

Kami menambahkan batang ke pohon

context.fillstyle = '#663300'; context.fillrect (-5, -50, 10, 50); Menggambar kurva

Context.Save ();

Context.translate (-10, 350);

context.beginpath (); // kurva pertama membungkuk ke kanan atas

Context.moveto (0, 0);

context.quadraticcurveto (170, -50, 260, -190); // bend ke kanan bawah

context.quadraticcurveto (310, -250, 410, -250); // Gambarlah jalur dalam stroke coklat lebar

Context.strokestyle = '#663300';

context.linewidth = 20;

Context.stroke (); // Kembalikan keadaan kanvas sebelumnya

Context.Restore ();

Masukkan gambar ke dalam kanvas

Anda harus menunggu sampai gambar sepenuhnya dimuat sebelum dapat dioperasikan. Browser biasanya memuat gambar secara tidak sinkron ketika skrip halaman dieksekusi. Jika Anda mencoba membuat gambar ke kanvas sebelum dimuat penuh, maka kanvas tidak akan menampilkan gambar apa pun. Oleh karena itu, beri perhatian khusus untuk memastikan bahwa gambar dimuat sebelum rendering.

// Muat gambarnya

var bark = gambar baru ();

bark.src = "bark.jpg"; // Setelah gambar dimuat, panggil fungsi gambar

bark.onload = function () {

drawtrails ();

}

Tampilkan gambar:

// Isi dengan pola latar belakang sebagai konteks latar belakang.drawimage (kulit kayu, -5, -50, 10, 50); gradien

Menggunakan gradien membutuhkan tiga langkah:

(1) Buat objek gradien

(2) Atur warna untuk objek gradien dan tunjukkan metode transisi

(3) Tetapkan gradien untuk gaya pengisian atau gaya stroke pada konteks

// Buat gradien horizontal orde ketiga yang digunakan sebagai tekstur batang

var trunkgradient = context.createLineArgradient (-5, -50, 5, -50); // tepi kiri batang berwarna coklat rata -rata

trunkgradient.addcolorstop (0, '#663300'); // Ada beberapa warna untuk dibicarakan di tengah batang pohon kiri

trunkgradient.addcolorstop (0,4, '#996600'); // warna tepi kanan harus lebih gelap

trunkgradient.addcolorstop (1, '#552200'); // isi trunk dengan gradien

context.fillstyle = trunkgradient;

context.fillrect (-5, -50, 10, 50);

// Buat gradien vertikal untuk memproyeksikan kanopi di bagasi

var canopyshadow = context.createLineArgradient (0, -50, 0, 0);

// Titik awal gradien proyeksi berkulit hitam dengan transparansi 50%

canopyshadow.addcolorstop (0, 'rgba (0, 0, 0, 0,5)');

// arahnya secara vertikal ke bawah, dan gradien dengan cepat berubah secara bertahap menjadi sepenuhnya transparan dalam jarak yang sangat pendek, di luar panjang ini

// Tidak ada proyeksi di batang pohon

canopyshadow.addcolorstop (0,2, 'rgba (0, 0, 0, 0,0)'); // isi gradien proyeksi di bagasi

context.fillstyle = canopyshadow;

context.fillrect (-5, -50, 10, 50);

Gambar latar belakang

// Muat gambarnya

var kerikil = gambar baru ();

gravel.src = "gravel.jpg";

gravel.onload = function () {

drawtrails ();

} // ganti garis tebal coklat dengan gambar latar belakang

context.strokestyle = context.createPattern (kerikil, 'ulangi');

context.linewidth = 20;

Context.stroke ();

Parameter kedua konteks. CreatePattern adalah penanda yang dapat diulang, dan nilai yang sesuai dapat dipilih pada Tabel 2-1.

Metode ubin	makna
mengulang	(Default) Gambar akan ubin dalam dua arah
Repeat-x	Ubin datar horizontal
ulangi-y	Ubin datar vertikal
tidak ada repeat	Gambar hanya ditampilkan sekali, bukan ubin

Zoom

Scaling function context.scale (x, y): x, y mewakili nilai dalam dua dimensi x dan y masing -masing. Ketika setiap parameter menampilkan gambar, itu meneruskannya jumlah gambar yang akan diperbesar (atau dikurangi) pada sumbu arah ini. Jika nilai X adalah 2, itu berarti bahwa semua elemen dalam gambar yang ditarik akan menjadi dua kali lebih lebar. Jika nilai Y 0,5, gambar yang ditarik akan menjadi setengah dari tinggi.

// Gambar pohon pertama di x = 130, y = 250

Context.Save ();

Context.translate (130, 250);

drawtree (konteks);

Context.Restore (); // Gambar pohon kedua pada x = 260, y = 500

Context.Save ();

context.translate (260, 500); // zoom di ketinggian dan lebar pohon kedua menjadi dua kali lipat aslinya

Context.Scale (2, 2);

drawtree (konteks);

Context.Restore ();

Memutar

Putar gambar

Context.Save ();

// Parameter sudut rotasi berada dalam radian sebagai unit

Context.Rotate (1.57);

Context.drawimage (MyImage, 0, 0, 100, 100); Context.Restore ();

Metode menggunakan transformasi

// Simpan status saat ini

Context.Save (); // Nilai X meningkat seiring dengan meningkatnya nilai Y. Dengan bantuan transformasi tarik,

// dapat membuat pohon miring yang digunakan sebagai bayangan

// Setelah transformasi diterapkan, semua koordinat dikalikan dengan matriks

Context.transform (1, 0,

-0.5, 1,

, 0); // dalam arah sumbu y, ubah tinggi bayangan menjadi 60%

Context.Scale (1, 0,6); // Isi batang dengan transparansi hitam 20%

context.fillstyle = 'rgba (0, 0, 0, 0.2)';

context.fillrect (-5, -50, 10, 50); // cat ulang pohon dengan efek bayangan yang ada

createCanopyPath (konteks);

context.fill (); // Kembalikan keadaan kanvas sebelumnya

Context.Restore ();

teks

Context.FillText (Teks, x, y, maxwidth): Konten teks teks, x, y menentukan posisi teks, maxwidth adalah parameter opsional, membatasi posisi teks.

Context.strokeText (teks, x, y, maxwidth): Konten teks teks, x, y menentukan posisi teks, maxwidth adalah parameter opsional, membatasi posisi teks.

// Gambar teks di atas kanvas

context.save (); // ukuran font adalah 60, font adalah dampak

context.font = "dampak 60px"; // isi warna

context.fillstyle = '#996600';

//Tengah

context.textAlign = 'center'; // menggambar teks

Context.FillText ('Happy Trails!', 200, 60, 400);

Context.Restore ();

bayangan

Bayangan dapat dikontrol melalui beberapa properti konteks global

milik	nilai	Komentar
Shadowcolor	Nilai warna di CSS apa pun	Transparansi (alpha) dapat digunakan
Shadowoffsetx	Nilai piksel	Nilainya positif, pindahkan bayangan ke kanan; itu negatif, pindahkan bayangan ke kiri
Shadowoffsety	Nilai piksel	Nilainya positif, pindahkan bayangan ke bawah; itu negatif, gerakkan bayangan ke atas
Shadowblur	Nilai fuzzy Gaussian	Semakin besar nilainya, semakin buramnya tepi bayangan

// warna hitam, transparansi 20%

context.shadowcolor = 'rgba (0, 0, 0, 0.2)'; // pindahkan 15px ke kanan dan 10px ke kiri

context.shadowoffsetx = 15;

context.shadowoffsety = -10; // shadow sedikit kabur

context.shadowblur = 2;

Data piksel

context.getImagedata (sx, sy, sw, sh): sx, xy menentukan titik, sw: lebar, sh: tinggi.

Fungsi ini mengembalikan tiga properti: Lebar berapa piksel per baris tinggi berapa piksel per kolom

Data Sekelompok array yang berisi nilai RGBA (nilai merah, hijau, biru, dan transparansi) dari setiap piksel yang diperoleh dari kanvas.

Context.putimageData (Imagedata, DX, DY): Memungkinkan pengembang untuk lulus dalam satu set data gambar. DX, DY digunakan untuk menentukan offset. Jika digunakan, fungsi akan melompat ke posisi kanvas yang ditentukan untuk memperbarui

Menampilkan data piksel yang masuk.

Canvas.todataurl: Data yang saat ini disajikan pada kanvas dapat diperoleh secara terprogram. Data yang diperoleh disimpan dalam format teks, dan browser dapat menguraikannya ke dalam gambar.