Komentar: Lebar dan ketinggian kanvas default adalah 300 dan 150. Untuk menghindari pengecualian, yang terbaik adalah menggunakan atribut tampilan untuk menambahkannya daripada menggunakan CSS untuk menambahkan lebar dan tinggi. Di bawah ini adalah pengantar singkat tentang tindakan pencegahan untuk menggunakan kanvas. Teman yang tertarik dapat merujuknya. Saya harap ini akan membantu Anda.
1. Canvas Tutorial Cina https://developer.mozilla.org/zh-cn/docs/canvas_tutorial2. Lebar dan ketinggian kanvas default adalah 300 dan 150. Untuk menghindari pengecualian, yang terbaik adalah menggunakan atribut tampilan untuk menambahkannya daripada menggunakan CSS untuk menambahkan lebar dan tinggi.
3. Instruksi untuk menambahkan browser yang tidak mendukung tag Canvas di dalam tag Canvas
4. Anda juga dapat menentukan apakah browser mendukung kanvas melalui kode JS berikut.
var canvas = document.getElementById ('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext ('2d');
// menggambar kode di sini
} kalau tidak {
// Kode Canvas-Unported di sini
}
5. Canvas hanya mendukung gambar satu bentuk dasar, yaitu persegi panjang, tetapi angka lain dapat ditarik melalui jalur kanvas.
6. Ada empat fungsi untuk menggambar persegi panjang: Rect, Fillrect, Strokerect dan ClearRect
7. Fungsi Begurpath digunakan untuk memulai lapisan jalur baru. Jika tidak ditambahkan, itu berarti menggambar pada lapisan jalur asli. Efek dari dua kode berikut ini benar -benar berbeda. Kode pertama menunjukkan dua garis merah, dan kode kedua menunjukkan garis hitam dan garis merah.
var ctx = document.geteLementById ('cvs'). getContext ('2d');
ctx.beginpath ();
ctx.moveto (100.5.20.5);
ctx.lineto (200.5, 20.5);
ctx.stroke ();
ctx.moveto (100.5.40.5);
ctx.lineto (200.5, 40.5)
ctx.strokestyle = '#f00';
ctx.stroke ();
var ctx = document.geteLementById ('cvs'). getContext ('2d');
ctx.beginpath ();
ctx.moveto (100.5.20.5);
ctx.lineto (200.5, 20.5);
ctx.stroke ();
ctx.beginpath ();
ctx.moveto (100.5.40.5);
ctx.lineto (200.5, 40.5)
ctx.strokestyle = '#f00';
ctx.stroke ();
8. Jika jalur tidak diperlukan untuk menutup, ClosePath dapat digunakan. Jika pengisian digunakan, jalur akan ditutup secara otomatis. Tidak perlu menggunakan ClosePath lagi.
9. Selama Anda memiliki kesabaran yang cukup, Anda dapat menggunakan Kurva Bezier untuk menggambar angka apa pun.
10. Ada bug di kurva kuadratik di bawah Firefox, sehingga kurva kubik dapat digunakan sebagai pengganti kurva kuadratik.
11. Gambar (seperti PNG, GIF, JPEG, dll.) Dapat dimasukkan ke dalam kanvas, dan elemen kanvas lainnya juga dapat digunakan sebagai sumber gambar.
12. Di bawah ini adalah kode gambar gambar kanvas dasar, di mana gambar adalah gambar atau objek kanvas, x dan y adalah koordinat awal mereka di kanvas target
DrawImage (gambar, x, y)
Kode berikut mewakili gambar yang diperbesar, lebar dan tinggi mewakili ukuran yang diperbesar
DrawImage (gambar, x, y, lebar, tinggi)
Kode berikut mewakili gambar kliping. Parameter pertama sama dengan yang lain, keduanya adalah referensi ke satu gambar atau kanvas lain. The other 8 parameters respectively represent the starting x coordinates of the cut in the picture, the starting y coordinates of the cut in the picture, the width of the cut area, the height of the cut area, the x coordinates of the drawn position, the y coordinates of the drawn position, the width of the drawn figure, the height of the drawn figure, the size of the cut area can be different from the size of the drawn figure, and will be scaled to the size of the gambar yang digambar.
DrawImage (Image, SX, SY, Swidth, Sheight, DX, Dy, Dwidth, Dheight)
13. Strokestyle digunakan untuk mengatur warna garis besar grafik, sedangkan stystyle digunakan untuk mengatur warna pengisian. Warna dapat berupa string, objek gradien, atau objek pola yang mewakili nilai warna CSS. Secara default, baik garis dan warna pengisian berwarna hitam (nilai warna CSS #000000).
14. Gambar transparansi dapat diekspresikan oleh Globalalpha = Nilai Transparansi atau Nilai Warna RGBA
15. Properti Linewidth menetapkan ketebalan garis yang ditarik saat ini. Untuk menyelesaikan bug lebar garis 1px, +0.5 digunakan untuk menyelesaikannya.
16. Garis pada garis paling kiri atribut Linecap menggunakan pantat default. Dapat dicatat bahwa itu rata dengan garis tambahan. Di tengah adalah efek bundar, dan setengah lingkaran dengan jari -jari setengah lebar garis ditambahkan pada titik akhir. Di sebelah kanan adalah efek kuadrat, dengan kuadrat dengan lebar yang sama dan ketinggian setengah lebar garis ditambahkan pada titik akhir.
17. Di sini saya juga menggunakan tiga polyline sebagai contoh untuk menetapkan nilai linejoin yang berbeda. Yang teratas adalah efek bundar, tepi dan sudut dibulatkan, dan jari -jari lingkaran sama dengan lebar garis. Tengah dan bawah adalah efek bevel dan miteri masing -masing. Ketika nilainya mitra, segmen garis akan meluas di luar koneksi sampai berpotongan pada satu titik. Efek ekstensi dibatasi oleh atribut mitericlimit yang akan diperkenalkan di bawah ini
18. Metode Simpan dan Pemulihan digunakan untuk menyimpan dan memulihkan keadaan kanvas, dan tidak ada yang memiliki parameter. Keadaan kanvas adalah snapshot dari semua gaya dan deformasi yang diterapkan pada layar saat ini. Keadaan kanvas disimpan dalam bentuk tumpukan (tumpukan). Setiap kali metode simpan dipanggil, keadaan saat ini akan didorong ke tumpukan dan disimpan. Setiap kali metode pemulihan dipanggil, keadaan disimpan sebelumnya muncul dari tumpukan dan semua pengaturan dipulihkan.
19. Transform (1, 0, 0, 1, 0, 0) Parameter mewakili penskalaan horizontal, rotasi horizontal (searah jarum jam), rotasi vertikal (berlawanan arah jarum jam), penskalaan vertikal, offset horizontal, offset vertikal
SetTransform (1, 0, 0, 1, 0, 0) berarti mengatur ulang matriks transformasi sebelumnya dan kemudian membangun matriks baru. Parameternya sama seperti di atas
putar (sudut), (satu jari -jari sama dengan 1 radian, 2πr/r = radian, yaitu, 360 = 2π, yaitu, 1 = π/180)
20. Animasi sebenarnya terus membersihkan Artboard (ClearRect ()) dan kemudian mengecatnya