Untuk detailnya, HTML5 Canvas Common API Ringkasan (2) -Drawing API

Kanvas dapat menarik banyak gaya yang indah dan efek yang indah.

Saat melukis, kanvas setara dengan kain, dan konteks setara dengan sikat.

MOVETO (X0, Y0): Pindahkan sikat saat ini (ictx) ke posisi ini (x0, y0).

Lineto (x1, y1): Gambar garis lurus dari posisi saat ini (x0, y0) ke (x1, y1).

BeginPath (): Buka jalur atau setel ulang jalur saat ini.

ClosePath (): Kembali ke titik awal jalur dari titik saat ini, yaitu, posisi beginpath sebelumnya, hindari dan jalan.

Stroke (): Draw. Fungsi ini harus ditambahkan untuk menggambar, jadi ini harus ditempatkan di akhir.

 var icanvas. Document.getElementByID (ICANVAS); ();

Memengaruhi:

Perhatikan di sini bahwa jika ClosePath ditempatkan di belakang fungsi stroke, itu tidak akan ditarik ke garis tertutup, karena ditarik sebelum ditutup, sehingga garis lurus di sebelah kiri tidak akan ditarik.

Linecap: Gaya titik akhir garis, pantat, rand, persegi.

LineKoin: Gaya titik balik ketika dua garis berpotongan.

MITERLIMET: Jika panjang sedimen melebihi nilai Mitericlimit, sudut akan ditampilkan dalam jenis linjoin Bevel.

Linewidth: Lebar garis

Strokestyle: Warna garis, gradien (objek gradien yang ditentukan), mode. Context.strokesty =#333;

 var icanvas , Ictx.lineto (80,80); Diagonal hitam lagi, total 3 baris. Ictx.strokestyle =#000000;

Begurpath dan ClosePath tidak dapat muncul berpasangan.

Busur (x, y, jari -jari, startangle, endangle, berlawanan arah jarum jam): kurva gambar, jari -jari adalah jari -jari kurva, startangle, sudut awal endangle dan sudut ending, dengan busur (matematika.pi/180)*Nilai sudut, arahan gambar ise antiklockw Ise Item

Arcto (x1, y1, x2, y2, radius): Gambar kurva sebelum dua garis potong.

 Ictx.beginpath (); / Buat busur ictx.lineto (150.120);

Gambarlah koneksi titik awal dan titik akhir horizontal dari garis horizontal ke titik akhir pengaturan garis horizontal.

QuadratCurveto (x1, y1, x2, y2): dua kurva Bessel. (X1, y1) Koordinat titik kontrol, (x2, y2) Koordinat titik akhir

Beziercurveto (x1, y1, x2, y2, x, y): tiga kurva Bessel. (X1, y1) Koordinat titik kontrol 1, (x2, y2) titik kontrol 2 koordinat (x, y) titik akhir.

Kurva Bessel sangat berguna saat menggambar beberapa kurva yang sangat halus.

Rect (): buat persegi panjang;

Filect (x, y, lebar, tinggi): Gambar persegi panjang yang diisi: (x, y) Titik awal, lebar, tinggi persegi panjang ketinggian tinggi tinggi tinggi tinggi

strokerect (): menggambar bingkai kawat persegi panjang

ClearRect (): Hapus persegi panjang.

 Ictx.fillstyle =#0000ff;

FillStyle: Atur warna, gradien atau pola (Patten);

Strokestyle: warna, gradien atau pola kuas

Shadowcolor: Shadow Yanse

Shadowblur: Level kabur

Shadowoffsetx: jarak horizontal bayangan

Shadowoffsety: jarak vertikal bayangan

 Ictx.shadowblur = 20;

CreateLineArgradient (x1, y1, x2, y2): Gambar gradien linear, (x1, y1) adalah titik awal gradien, (x2, y2) adalah titik akhir gradien.

Createradialgradient (x1, y1, r1, x2, y2, r2): gradien radial: (x1, y1) adalah titik awal gradien, r1 adalah jari -jari, (x2, y2) adalah titik akhir dari gradien, r2 adalah jari -jari titik akhir;

Kedua nilai perlu digunakan

AddColorsStop (Stop, Color) diatur untuk mengatur proses gradien, dan nilainya 0,0 hingga 1.0.

 var grd = ictx.createlinearadient (0,0,170,0); // gradien di sini adalah objek, yang digunakan untuk memberikan nilai untuk mengisi (200.150.150.100);

CreatePattern (gambar, ulangi | ulangi-x | ulangi-y | no-repeat): Gambar adalah objek gambar, dan parameter selanjutnya digunakan untuk mengatur metode gambar yang berulang.

fill (): Isi jalur saat ini.

isPointInpath (): ictx.ispointinpath (x, y);

Lepaskan kanvas: Dapatkan lebar dan tinggi kanvas, icanvas.height, icanvas.width;

Ubah lebar kanvas: icanvas.width = '200';

Globalpha: Tetapkan transparansi, hanya 0 ~ 1 nomor.

Todataurl: icanvas.todataurl (Tipe, Encderoptions), fungsi ini mengembalikan URI dari gambar64 dalam gambar, parameter tersedia, tipe dapat mengatur tipe gambar seperti gambar/jpeg, gambar/webp, default adalah gambar/p default NG; adalah nomor 0 ~ 1 digunakan untuk mengatur kualitas gambar gambar/jpeg, gambar/webp, dan ketik dalam format lain mengatur parameter ini tidak valid.

Clip (): Kanvas dari segala bentuk dan ukuran dari kanvas, dan kemudian semua gambar akan terbatas pada area menjahit. Metode ini biasanya digunakan dengan jalur seperti persegi panjang, bentuk bundar.

 Ictx.arc (100,100,50, (Math.pi/180)*0, (Math.pi/180)*360, true); ;

Jika Anda masih ingin mengoperasikan kanvas eksternal, gunakan fungsi save () untuk menyimpan sebelum memotong, dan menggunakan fungsi restore () untuk mengembalikan keadaan yang disimpan sebelumnya setelah pemotongan, tetapi operasi di tengah tidak akan hilang.

Di atas adalah semua isi artikel ini.