Artikel ini terutama memperkenalkan 24 ringkasan pengetahuan dasar kanvas, yang sangat komprehensif dan terperinci, dan direkomendasikan kepada semua orang.
Sekarang rangkum titik -titik pengetahuan kanvas sebagai berikut sehingga mereka dapat dibaca kapan saja.
1. Isi fillrect persegi panjang (x, y, lebar, tinggi); 2. Gambarkan stroker batas persegi panjang (x, y, lebar, tinggi); 3. Hapus persegi panjang clearrect (x, y, lebar, tinggi); 4. Fillstyle = merah; Gaya bisa berupa warna, gradien, dan gambar. 5. Strokestyle = merah; 6. Lebar garis stroke linewidth = 4; 7. Bentuk ujung garis linecap = butt; butt (docking)/round (lingkaran)/persegi (persegi), secara default itu adalah butt; 8. Gaya persimpangan garis linejoin = mIter; mitra (sudut tajam)/bundar (sudut bulat)/bevel (sudut bevel), sudut tajam default; 9. Mulai menggambar jalan bintar (); 10. Akhiri jalan ClosePath (); Setelah membuat jalur, jika Anda ingin menggambar garis yang terhubung ke titik awal jalur, Anda dapat menghubungi ClosePath (); 11. Gambar busur busur (x, y, jari -jari, startangle, endangle, true/false); 12. Gambar busur arcto (x1, y1, x2, y2, radius) mulai menggambar busur satu hari dari titik sebelumnya, sampai x2, y2, dan melewati x1, y1 dengan jari -jari yang diberikan; 13. MOVETO (X, Y); Pindahkan kursor gambar ke (x, y), tanpa garis gambar 14. Lineto (x, y); Gambar garis lurus dari titik sebelumnya 15. Kurva Bezier Kuadrat: Quadratcurveto (CX, CY, X, Y); Mulailah menggambar kurva kuadrat dari titik sebelumnya, sampai x, y, cx, cy berfungsi sebagai titik kontrol. 16. Kurva Bezier Cubic : BezierCurveto (CX1, CY1, CX2, CY2, X, Y); Mulailah menggambar kurva kuadratik dari titik sebelumnya, sampai x, y, cx1, cy1 dan cx2, cy2 digunakan sebagai titik kontrol. 17. Rect (x, y, lebar, tinggi); Mulai dari titik x, y, dan lebar dan tinggi masing -masing ditentukan dengan lebar dan tinggi. Metode ini menarik jalur persegi panjang, bukan bentuk yang terpisah. 18. Gambar teks:(1) Isi Teks: FillText (halo, x, y, lebar); lebar adalah lebar piksel maksimum opsional. Jika teks lebih besar dari lebar maksimum, teks akan menyusut untuk mengakomodasi lebar maksimum.
(2) Teks Stroke: StrokeText (halo, x, y, lebar); lebar adalah lebar piksel maksimum opsional.
(3) gaya teks: font = tebal 14px Arial;
(4) Penyelarasan Teks Horizontal: TextAlign = 'Start'; // Mulai, Akhir, Kiri, Kanan, Tengah. Nilai default: Mulai. Sejajarkan sumbu vertikal dengan titik awal (x, y) dari teks sebagai titik dasar.
(5) Penyelarasan teks vertikal: TextBaseline = 'alfabet'; // Top, gantung, tengah, alfabet, idegraphic, bawah. Nilai default: Alpabet. Sejajarkan sumbu horizontal dengan titik awal (x, y) dari teks sebagai titik dasar.
(6) Lebar teks: var text = hello; var length = Context.MeasureText (Teks); Teks parameter adalah teks yang perlu ditarik
19. Perubahan
(1) Putar (sudut): Putar sudut sudut gambar di sekitar titik asal.
Anda juga dapat menggunakan Transform (Math.cos (Angle*Math.pi/180), Math.sin (Angle*Math.pi/180),-Math.sin (Angle*Math.pi/180), Math.cos (Angle*Math.pi/180), 0,0);
(2) Skala (x, y): Skala gambar. Anda juga dapat menggunakan transformasi (x, 0,0, y, 0,0);
(3) Terjemahan (x, y): Pindahkan asal koordinat ke x, y. Setelah melakukan transformasi ini, koordinat 0 dan 0 akan menjadi titik yang diwakili oleh x, y sebelumnya. Anda juga dapat menggunakan transformasi (1,0,0,1, x, y);
(4) transformasi (<number>, <number>, <number>, <number>, <number>, x, y);
(5) setTransform (<number>, <number>, <number>, <number>, x, y); Setel ulang matriks transformasi ke keadaan default, dan kemudian panggilan transformasi ();
20. Kombinasi grafis Salin kode