<type skrip = "Teks/JavaScript">
mencoba
{
document.createElement ("Canvas"). GetContext ("2D");
document.geteLementById ("dukungan"). innerHtml = "ok";
}
Tangkap (E)
{
document.geteLementById ("dukungan"). innerHtml = e.message;
}
</script>
Bergabunglah dengan kanvas <Canvas ID = Gaya Diagonal = Border: 1px Solid Blue; Lebar = 200 tinggi = 200/>// 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 ();
MengubahEfek 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 (); </p> <p> Context.Restore ();
jalurJalur 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 (); </p> <p> Context.moveto (-25, -50);
Context.lineto (-10, -80);
context.lineto (-20, -80);
context.lineto (-5, -110);
context.lineto (-15, -110); </p> <p> // vertex dari pohon
context.lineto (0, -140); </p> <p> 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 ();
} </p> <p> function drawtrails () {
var canvas = document.getElementById ('diagonal');
var context = canvas.getContext ('2d'); </p> <p> context.save ();
Context.translate (130, 250); </p> <p> // Buat jalur yang mengekspresikan kanopi
createCanopyPath (konteks); </p> <p> // gambar jalur saat ini
Context.stroke ();
Context.Restore ();
} </p> <p> window.addeventListener ("muat", drawtrails, true);
Gaya strokeMode 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 panjangKami menambahkan batang ke pohon
context.fillstyle = '#663300'; context.fillrect (-5, -50, 10, 50); Menggambar kurvaContext.Save ();
Context.translate (-10, 350);
context.beginpath (); </p> <p> // kurva pertama membungkuk ke kanan atas
Context.moveto (0, 0);
context.quadraticcurveto (170, -50, 260, -190); </p> <p> // bend ke kanan bawah
context.quadraticcurveto (310, -250, 410, -250); </p> <p> // Gambarlah jalur dalam stroke coklat lebar
Context.strokestyle = '#663300';
context.linewidth = 20;
Context.stroke (); </p> <p> // Kembalikan keadaan kanvas sebelumnya
Context.Restore ();
Masukkan gambar ke dalam kanvasAnda 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"; </p> <p> // 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); gradienMenggunakan 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); </p> <p> // tepi kiri batang berwarna coklat rata -rata
trunkgradient.addcolorstop (0, '#663300'); </p> <p> // Ada beberapa warna untuk dibicarakan di tengah batang pohon kiri
trunkgradient.addcolorstop (0,4, '#996600'); </p> <p> // warna tepi kanan harus lebih gelap
trunkgradient.addcolorstop (1, '#552200'); </p> <p> // 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)'); </p> <p> // 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 ();
} </p> <p> // 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 |
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 (); </p> <p> // Gambar pohon kedua pada x = 260, y = 500
Context.Save ();
context.translate (260, 500); </p> <p> // zoom di ketinggian dan lebar pohon kedua menjadi dua kali lipat aslinya
Context.Scale (2, 2);
drawtree (konteks);
Context.Restore ();
MemutarPutar gambar
Context.Save ();
// Parameter sudut rotasi berada dalam radian sebagai unit
Context.Rotate (1.57);
Context.drawimage (MyImage, 0, 0, 100, 100); </p> <p> Context.Restore ();
Metode menggunakan transformasi
// Simpan status saat ini
Context.Save (); </p> <p> // 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); </p> <p> // dalam arah sumbu y, ubah tinggi bayangan menjadi 60%
Context.Scale (1, 0,6); </p> <p> // Isi batang dengan transparansi hitam 20%
context.fillstyle = 'rgba (0, 0, 0, 0.2)';
context.fillrect (-5, -50, 10, 50); </p> <p> // cat ulang pohon dengan efek bayangan yang ada
createCanopyPath (konteks);
context.fill (); </p> <p> // Kembalikan keadaan kanvas sebelumnya
Context.Restore ();
teksContext.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 (); </p> <p> // ukuran font adalah 60, font adalah dampak
context.font = "dampak 60px"; </p> <p> // isi warna
context.fillstyle = '#996600';
//Tengah
context.textAlign = 'center'; </p> <p> // menggambar teks
Context.FillText ('Happy Trails!', 200, 60, 400);
Context.Restore ();
bayanganBayangan 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)'; </p> <p> // pindahkan 15px ke kanan dan 10px ke kiri
context.shadowoffsetx = 15;
context.shadowoffsety = -10; </p> <p> // shadow sedikit kabur
context.shadowblur = 2;
Data pikselcontext.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.