Penjelasan terperinci tentang kaedah HTML5 Convas APIs_html5 kemahiran tutorial

☆ canvas.getContext('2d')

Anda tidak boleh melukis terus dalam kanvas, anda mesti menggunakan kaedah ini untuk mendapatkan
dasar lukisan ruang dua dimensinya.

☆ context.beginPath()

menandakan memulakan lukisan laluan baharu.

☆ context.isPointInPath(x, y)

Tentukan sama ada titik tertentu berada di laluan. Kaedah ini tidak berfungsi selepas sistem koordinat telah diubah.

☆ context.moveTo(x,y)

sama dengan mengangkat berus dari papan lukisan, meninggalkan hujung pen dari papan lukisan, kemudian meletakkan hujung pen pada koordinat
(x, y) dan memulakan lukisan baharu pada kedudukan baharu ini .

☆ context.lineTo(x, y)

adalah bersamaan dengan hujung berus yang tidak meninggalkan papan lukisan Hujung berus bergerak dari kedudukan koordinat semasa ke koordinat
(x, y) untuk melukis segmen garisan.

☆ context.stroke()

Selepas melukis pada kanvas, beberapa operasi lukisan mesti memanggil kaedah ini untuk membolehkan kandungan yang dilukis
dipaparkan.

☆ context.save()

Kaedah ini menyimpan keadaan semasa convas, tanpa mengira sebarang perubahan pada convas pada masa hadapan
Selagi anda menyimpan keadaan convas sebelum membuat perubahan ini, anda boleh memanggil
context.restore. () kaedah untuk memulihkannya kepada keadaan yang disimpan kemudian. Biasanya keadaan asal kanvas (tanpa sebarang lukisan atau perubahan
) hendaklah disimpan sebelum lukisan baharu
atau operasi pengubahsuaian, dan dipulihkan kepada keadaan asal setiap kali selepas lukisan atau operasi pengubahsuaian baharu tamat.
ini akan membantu untuk operasi lukisan masa hadapan.
Malah, banyak sifat dan beberapa kaedah konteks persekitaran lukisan 2d kanvas berkaitan dengan keadaan
Apabila nilai setiap sifat ditukar (atau beberapa kaedah digunakan untuk menukar keadaan lukisan),
keadaan lukisan ialah Perubahan. Jika disimpan selepas setiap perubahan, berbilang keadaan atribut akan disimpan dalam bentuk tindanan Anda boleh memanggil kaedah pemulihan() beberapa kali dalam susunan tindanan untuk kembali ke keadaan disimpan yang sepadan.

☆ context.translate(x, y)

Kaedah ini mengalihkan asalan koordinat semasa ke (x, y).

☆ context.restore()

Pulihkan keadaan kanvas kepada keadaan terakhir disimpan.

☆ context.closePath()

Arahan ini sangat serupa dalam tingkah laku dengan fungsi lineTo

, dengan perbezaannya ialah destinasi

diandaikan secara automatik sebagai
asal laluan Walau bagaimanapun, closePath juga memaklumkan
kanvas yang bentuk semasa telah ditutup atau membentuk
kawasan yang terkandung sepenuhnya ini akan berguna untuk masa depan

Pada ketika ini, anda bebas untuk meneruskan dengan lebih banyak
segmen dalam laluan anda untuk membuat sublaluan tambahan Atau anda
boleh memulakanPath pada bila-bila masa untuk memulakan semula dan mengosongkan laluan
senarai sepenuhnya.

☆ context.fill();

Isi laluan tertutup selepas menetapkan gaya isian. Tidak perlu memanggil kaedah

context.stroke() selepas memanggil kaedah ini.

☆ context.fillRect(x, y, lebar, tinggi)

Lukis dan isikan kawasan segi empat tepat dengan lebar dan panjang (lebar, tinggi) pada (x, y). Tidak perlu memanggil kaedah context.stroke() selepas memanggil

kaedah ini.

☆ context.strokeRect(x, y, lebar, tinggi)

Lukis garis besar segi empat tepat dengan lebar dan panjang (lebar, tinggi) pada (x, y).

☆ context.clearRect(x, y, lebar, tinggi)

Bersihkan kawasan segi empat tepat yang kedudukannya (sudut kiri atas segi empat tepat) ialah (x, y,) dan saiznya (lebar, tinggi)

.

Alih keluar sebarang kandungan dari kawasan segi empat tepat dan tetapkannya
kepada warna asalnya yang telus
Keupayaan untuk mengosongkan segi empat tepat dalam kanvas adalah teras kepada
membuat animasi dan permainan menggunakan API Kanvas HTML5. Dengan
melukis dan mengosongkan bahagian kanvas secara berulang kali, ia
mungkin untuk mempersembahkan ilusi animasi, dan banyak
contoh ini sudah wujud di Web Walau bagaimanapun, untuk
membuat animasi yang berprestasi dengan lancar, anda perlu
menggunakan ciri keratan dan mungkin juga
kanvas penimbal sekunder untuk meminimumkan kelipan yang disebabkan oleh
kanvas yang kerap dikosongkan.

☆ context.drawImage( )

Kaedah ini mempunyai tiga beban berlebihan, yang boleh melukis imej pada kanvas. Sumber imej boleh menjadi teg img dalam halaman
, objek imej dalam JS dan bingkai video.
•context.drawImage(img, x, y)
Melukis imej dengan imej img di (x, y). Apabila saiz kanvas lebih besar daripada imej
, keseluruhan imej dilukis; apabila imej lebih besar daripada kanvas, bahagian yang berlebihan akan dipotong.
•context.drawImage(img, x, y, w, h)
Lukis kawasan segi empat tepat dengan panjang dan lebar (w, h) menggunakan img imej di (x, y). Saiz imej
akan ditukar kepada (w, h).
•context.drawImage(img, imgx, imgy, imgw, imgh, cx, cy,
cw, ch)
Gunakan imej img sebagai objek lukisan dan potong kedudukan atas img ke ( imgx, imgy
) Kawasan bersaiz (imgw, imgh) dilukis pada kedudukan (cx, cy)
dalam kanvas dan kawasan bersaiz (cw, ch) dilukis.
Jika kawasan yang dipangkas pada imej melebihi julat imej, pengecualian akan dilemparkan.
•context.drawImage(video, vx, vy, vw, vh, cx, cy, cw, ch)
Gunakan objek video sebagai objek lukisan dan ambil kedudukan atas video (vx, vy
) Bingkai dengan saiz (vw, vh), lukis kawasan dengan saiz (cw, ch) pada kedudukan (cx, cy) pada kanvas.
Selain itu, parameter pertama drawImage() juga boleh menjadi kanvas lain.

☆ context.getImageData(x, y, lebar, tinggi)

Kaedah ini memperoleh saiz (lebar, tinggi) daripada kedudukan (x, y) dalam kanvas

Kawasan piksel dan nilai pulangan ialah objek ImageData. ImageData mempunyai tiga atribut: lebar,
tinggi dan data. Atribut
data ialah tatasusunan piksel Setiap empat elemen berturut-turut dalam tatasusunan mewakili piksel Empat elemen berturut-turut mengandungi maklumat warna dan ketelusan RGBA. Empat elemen berturut-turut
mesti dimiliki oleh satu piksel, dan kedudukan elemen pertama tidak dipilih sewenang-wenangnya.
Susun atur piksel diperoleh dengan mengimbas kawasan yang ditentukan
dalam kanvas mengikut urutan dari atas ke bawah dan dari kiri ke kanan. Bilangan elemen dalam tatasusunan piksel ialah lebar * tinggi * 4. Untuk mendapatkan maklumat piksel untuk kedudukan
tertentu.
Jika halaman web yang menggunakan kaedah ini dibuka sebagai fail setempat dengan penyemak imbas, ia tidak akan berfungsi dengan betul
dan biasanya ralat keselamatan akan berlaku. Isu ini boleh diselesaikan dengan memuat naik fail ke pelayan web
dan kemudian meminta akses. Selain itu, imej, JS dan
HTML yang terlibat mesti datang daripada nama domain yang sama. Walau bagaimanapun, IE9 boleh diakses melalui fail tempatan.
Contohnya adalah seperti berikut:

Salin kod Kodnya adalah seperti berikut:

// Dapatkan kawasan piksel

var imageData = context.getImageData(0, 0, 3, 3);

var width = imageData.width;
//Kedudukan piksel tertentu dalam kawasan piksel
var x = 2;
var y = 2; berada dalam Indeks tatasusunan piksel bagi elemen yang sepadan
var pixelRedindex = ((y-1)*(lebar*4)) ((x-1)*4
var pixelGreenindex = pixelRedindex 1; >var pixelBlueindex = pixelRedindex 2
var pixelAlphaindex = pixelRedindex 3;

var pixel = imageData.data; // CanvasPixelArray

var merah = piksel[pixelRedindex];
var hijau = piksel[pixelGreenindex];
var biru = piksel[pixelBlueindex]; >


☆ context.createImageData(w, h)


Jana objek ImageData bersaiz (w, h) Maksud objek ImageData
adalah sama dengan objek ImageData yang diperolehi oleh getImageData().

☆ context.putImageData(ImageData, x, y, x1, y1, w, h)

Lukis objek ImageData pada kanvas di (x, y). Empat parameter terakhir ialah parameter pilihan, digunakan untuk menetapkan kedudukan dan saiz segi empat potong.

☆ context.createLinearGradient(x1, y1, x2, y2)

Hasilkan kecerunan linear antara (x1, y1) dan (x2, y2). Contohnya:

Salin kod

Kod adalah seperti berikut:

var gradientName = context.createLinearGradient( -5, -50,

5, -50);

☆ Gradient.addColorStop(offset, color)

Digunakan dalam kecerunan untuk menetapkan warna kecerunan di lokasi yang berbeza. Argumen warna
adalah warna yang anda mahu gunakan dalam lejang atau isi pada
kedudukan mengimbangi ialah nilai antara

0.0 dan 1.0, mewakili jarak sepanjang garis kecerunan warna hendaklah dicapai seperti:

gradientName.addColorStop(1, '#552200'); Warna boleh menggunakan fungsi rgba(r,g,b,a) dalam CSS untuk menjana kecerunan telus, seperti:

Salin kod

Kodnya adalah seperti berikut:

//Janakan kecerunan lutsinar warna 50%
gradientName.addColorStop(0.2, 'rgba(0, 0, 0, 0.5)');

☆ context.createRadialGradient(x0, y0, r0, x1, y1, r1)

Buat kawasan kecerunan jejari antara dua bulatan. Tiga hujah pertama
mewakili bulatan berpusat di (x0, y0) dengan jejari r0, dan
tiga argumen terakhir mewakili bulatan kedua berpusat
di (x1, y1) dengan jejari r1 dilukis merentasi
kawasan antara dua bulatan.

☆ context.createPattern(img, 'repeatPattern')

Gunakan img imej untuk menjana
gaya strokeStyle atau gaya fillStyle yang diisi bagi laluan tertentu dengan jenis ulanganPola. Nilai repeatPattern boleh
menjadi satu ulangan, ulang-x, ulang-y dan tiada ulangan. Contohnya:

Salin kod

Kodnya adalah seperti berikut:

context.strokeStyle = context.createPattern (kerikil,
'ulang');

Img parameter juga boleh menjadi kanvas atau video lain

☆ context.scale(xMultiple, yMultiple)

Dua parameter masing-masing menentukan faktor penskalaan lukisan seterusnya bagi objek dalam arah x dan y Jika lebih besar daripada 1,
bermaksud zum masuk, dan antara 0 dan 1 bermakna zum keluar. Jika ia adalah nilai negatif, kesan seperti refleksi dan flipping boleh dicapai
.

☆ context.rotate(sudut)

digunakan untuk memutarkan konteks persekitaran lukisan, dengan asal koordinat semasa sebagai pusat putaran, dalam radian
sebagai unit dan digabungkan dengan Math.PI. Apabila sudut parameter ialah nilai positif, ia berputar mengikut arah jam, dan apabila ia adalah nilai negatif, ia berputar mengikut lawan jam.

☆ context.transform(ScaleX, skewY, skewX, ScaleY, transX, transY)

Fungsi ini digunakan untuk mengawal saiz, ricih dan kedudukan objek lukisan Ia adalah matriks transformasi

. ScaleX dan ScaleY ialah penskalaan koordinat x dan y masing-masing. skewY mengawal ricih menegak bagi
nilainya boleh menjadi titik terapung positif atau negatif atau integer bagi sebarang saiz, yang bersamaan dengan
melakukan y'= y skewY * x pada ordinat. Lidi Dua parameter terakhir adalah bersamaan dengan dua parameter
dalam translate(x, y).


☆ context.setTransform(ScaleX, skewY, skewX, ScaleY,

transX, transY)

Kaedah ini serupa dengan transformasi, tetapi kaedah transformasi akan digabungkan dengan kesan kaedah transformasi, skala, dan putaran yang telah digunakan sebelum ini, menghasilkan kesan transformasi kompaun kompleks

. Kaedah setTransform akan menggunakan transformasi daripada keadaan asal konteks dan tidak akan

dikompaun dengan transformasi sebelumnya. Oleh itu, context.setTransform(1, 0, 0, 1,
0, 0) biasanya digunakan untuk memulihkan keadaan transformasi konteks kepada nilai asalnya.

☆ fillTeks (teks, x, y, lebar maks)

Lukis teks yang diisi dengan teks pada koordinat (x, y). maxwidth ialah parameter pilihan

, digunakan untuk mengehadkan lebar semua teks dan jumlah jarak teks Jika lebar semua dan jarak

melebihi nilai ini, lebar satu aksara teks dan jarak aksara akan menjadi. dimampatkan.

Watak individu menjadi memanjang dan jarak menjadi lebih kecil. Teks isian boleh dilukis dengan menggabungkan context.font,
context.fillStyle, context.textAlign dan atribut lain.


☆ StrokeTeks (teks, x, y, lebar maks)

Lukis teks dengan teks kandungan laluan pada koordinat (x, y). maxwidt ialah parameter pilihan , digunakan untuk mengehadkan lebar semua teks dan jumlah jarak teks Jika lebar semua dan jarak

melebihi nilai ini, lebar satu aksara teks dan jarak aksara akan menjadi. dimampatkan.

Watak individu menjadi memanjang dan jarak menjadi lebih kecil. Teks laluan boleh dilukis dengan menggabungkan context.font,
context.textAlign, context.lineWidth, context.strokeStyle dan sifat
lain.
Contohnya:

Salin kod

Kodnya adalah seperti berikut:

var fontSize = 100 ;

context.font = fontSize "px Arial";

while(context.measureText("Hello world!").lebar > 140)
{
fontSize--;
context .font = fontSize "px Arial";
}
context.fillText("Hello world!", 10, 10);
context.fillText("Saiz fon ialah " fontSize "px ", 10, 50);

☆ context.measureText("teks")

Kaedah ini mengira
saiz kawasan yang diduduki oleh teks berdasarkan nilai semasa fon, textAlign dan textBaseline. Parameter teks ialah kandungan teks yang digunakan untuk melukis. Kaedah ini
mengembalikan objek TextMetrics Pada masa ini, objek TextMetrics hanya mempunyai satu
sifat lebar dan lebih banyak sifat mungkin disediakan pada masa hadapan.

☆ context.rect(x, y, w, h)

Lukis segi empat tepat dengan lebar w dan tinggi h pada titik (x, y). Perkara semasa diabaikan. Tetapi selepas segi empat tepat dilukis
, (x, y) menjadi titik semasa yang baharu.

☆ context.arc(x, y, radius, startAngle, endAngle,
lawan arah jam)

Lukis lengkok. x, y ialah koordinat pusat lengkok; jejari ialah jejari lengkok; dan nilainya ialah 0 Lengkok mendatar ke kanan; lawan arah jam
menunjukkan arah melukis lengkok, yang merupakan parameter pilihan, nilai Boolean, benar adalah lawan jam, palsu
mengikut arah jam dan lalai adalah palsu . Menggunakan kaedah ini, kaedah lineTo boleh ditinggalkan. Selepas menggunakan kaedah
untuk melukis lengkok, lukisan laluan seterusnya akan bermula dari titik akhir lengkok
.

☆ context.arcTo(x1, y1, x2, y2, radius)

Titik semasa dan (x1, y1) membentuk garis L1, (x1, y1) dan (x2, y2) membentuk satu lagi garis

L2, dan titik semasa dan (x2, y2) membentuk garis ketiga L3. Jika (x1, y1) diambil sebagai asalan,

L1 dan L2 ialah paksi koordinat, jejari ialah jejari yang bertangen kepada L1 dan L2, dan berada pada bulatan O1 dalam sukuan yang sama dengan "segmen garis " L3, biarkan Titik tangen dengan L1 ialah p1, dan titik tangen dengan L2 ialah p2. Terdapat dua lengkok antara p1
dan p2 pada bulatan O1 Lengkok yang lebih dekat dengan asalan (x1, y1) (juga lengkok
yang lebih pendek pada bulatan) ialah lengkok yang dilukis.

Selain itu, segmen garisan akan dilukis untuk menyambung lengkok antara titik semasa dan (x1, y1)
, kerana lukisan laluan adalah berterusan, segmen garisan antara titik semasa dan (x1, y1) akan dilukis dahulu Lukis, kemudian

dan kemudian lukis lengkok. Titik tangen p2 menjadi titik semasa seterusnya.

Kaedah ini sering digunakan untuk melukis segi empat tepat bulat.

☆ context.quadraticCurveTo(x1, y1, x2, y2)

Lukis segmen lengkung Bezier kuadratik antara koordinat semasa dan (x2, y2), dan lengkungan dikawal oleh

(x1, y1). (x1, y1) tiada pada segmen lengkung.

Pilihan lain untuk lengkung dalam HTML5 Canvas API termasuk
fungsi bezierCurveTo, arcTo dan lengkok ini

mengambil titik kawalan tambahan, jejari atau sudut untuk

menentukan ciri lengkung. .

☆ context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Lukis lengkung Bezier padu dengan titik kawalan (cp1x, cp1y) dan (cp2x, cp2y)

antara titik semasa dan (x, y) untuk mengawal kelengkungan.

☆ context.clip()

Kaedah ini akan mencipta kawasan keratan

(rantau klip) berdasarkan laluan tertutup terakhir yang dilukis. Kawasan keratan adalah bersamaan dengan topeng Hanya bahagian kandungan yang dilukis pada masa hadapan

yang berada dalam kawasan keratan akan dipaparkan.

☆ context.isPointInPath(x, y)

Semak sama ada koordinat (x, y) berada dalam laluan yang dilukis. Nilai pulangan adalah benar atau

salah.

☆ canvas.toDataURL(type, args)

Kaedah ini boleh menukar kanvas kepada imej dan imej adalah berdasarkan pengekodan Base64. Jika

tidak menyatakan dua parameter, kaedah ini dipanggil tanpa parameter dan format imej yang ditukar ialah format png

.

•jenis: Tentukan format imej yang hendak ditukar, seperti imej/png, imej/jpeg, dsb.
•args: Parameter pilihan. Contohnya, jika jenis ialah imej/jpeg, args boleh menjadi nilai antara
0.0 dan 0.1 untuk menentukan kualiti imej.
Sebagai contoh, kod berikut akan membuka kandungan yang dilukis dalam kanvas dalam tetingkap penyemak imbas baharu
atau tab:

Salin kod

Kodnya adalah seperti berikut:

var canvas = document.getElementById("myCanvas");

window.open(canvas.toDataURL("image/png "));