Komentar: Artikel ini akan memperkenalkan pengaturan dan penggunaan transparansi dalam kanvas secara rinci. Menggabungkan dukungan pengisian dan transparansi bertahap, dapat mewujudkan efek topeng gambar. Demonstrasi kode metode linear progresif adalah sebagai berikut. Teman yang tertarik dapat merujuknya. Saya harap ini akan membantu semua orang.
Jelaskan pengaturan parameter dan penggunaan isi progresif di kanvas HTML5 secara rinci, pengaturan dan penggunaan transparansi dalam kanvas, dikombinasikan dengan pengisian progresif dan dukungan transparansi, untuk mencapai efek masker gambar.1: Pengisian gradien
Canvas mendukung dua metode pengisian tambahan, satu pengisian linear tambahan (line gradient isian), dan yang lainnya disebut
Isi RadialGradient. API mereka adalah:
CreateLineargradient (x1, y1, x2, y2);
di mana x1 dan y1 adalah koordinat dari titik pertama dan x2 dan y2 adalah koordinat dari titik kedua.
createradialgradient (x1, y1, r1, x2, y2, r2);
Di mana X1 dan Y1 adalah koordinat dari titik tengah pertama, R1 adalah jari -jari, x2 dan y2 adalah koordinat titik tengah kedua, dan R2 adalah jari -jari.
Setel warna untuk setiap titik
addColorstop (posisi, warna);
Di mana posisi mewakili posisi, kisaran ukuran [0 ~ 1], di mana 0 mewakili titik pertama, dan 1 mewakili koordinat titik kedua
Warna mewakili nilai warna, nilai warna CSS apa pun.
Setelah objek pengisian progresif dibuat dan dikonfigurasi, itu dapat digunakan untuk mengatur teks implementasi strokestyle dan fillstyle konteks.
Isi warna progresif bentuk geometris.
Demonstrasi kode pendekatan progresif linier:
1. Warna progresif dalam arah vertikal (y)
// arah vertikal/y
var lineGradient = ctx.createLineArgradient (50, 0, 50, 200);
LineGradient.AddColorstop (0, 'RGBA (255, 0, 0, 1)');
lineGradient.AddColorstop (1, 'RGBA (255, 255, 0, 1)');
ctx.fillstyle = lineGradient;
ctx.fillrect (0, 0, 300, 300);
2. Progresi Warna Horisontal (X)
// arah horizontal/x
var lineGradient = ctx.createLineArgradient (0, 50, 200, 50);
LineGradient.AddColorstop (0, 'RGBA (255, 0, 0, 1)');
lineGradient.AddColorstop (1, 'RGBA (255, 255, 0, 1)');
ctx.fillstyle = lineGradient;
ctx.fillrect (0, 0, 300, 300);
3. Vertikal dan horizontal secara bersamaan (arah XY) Progresif Progresif
// arah vertikal dan horizontal
var lineGradient = ctx.createLineArgradient (0, 0, 200, 200);
LineGradient.AddColorstop (0, 'RGBA (255, 0, 0, 1)');
lineGradient.AddColorstop (1, 'RGBA (255, 255, 0, 1)');
ctx.fillstyle = lineGradient;
ctx.fillrect (0, 0, 300, 300);
2: Transparan
Dukungan transparansi di kanvas dibagi menjadi pengaturan transparansi global dan lokal. Pengaturan transparansi global dapat ditetapkan
Context.globalalpha diimplementasikan. Transparansi lokal dapat diatur melalui fillstyle ke saluran nilai alpha dalam nilai warna
Untuk mencapainya. Dua metode kode adalah sebagai berikut:
// Ubah Nilai Alpha Global
ctx.globalalpha = 0,5;
ctx.fillrect (50,50,75,50);
// Ubah Alfachannel Gaya Gaya Isi
ctx.fillstyle = 'rgba (225.225.225.0.5)';
ctx.fillrect (50,50,75,50);
Kedua efeknya sama.
Tiga: Efek Foto Topeng Transparan dan Secara Bertahap
Gunakan perubahan gradien warna radial dan transparansi untuk mencapai efek topeng tembus cahaya pada gambar, dan efek run skrip:
var myimage = document.createElement ('img');
myimage.src = "../test.png";
myimage.onload = function () {
ctx.drawimage (Myimage, 80, 30, myimage.naturalwidth, myimage.naturalheight);
var RadialGradient = ctx.createradialGradient (canvas.width/2, canvas.height/2, 10, canvas.width/2, canvas.height/2, 200);
RadialGradient.AddColorstop (0, 'RGBA (247, 247, 247, 0)');
RadialGradient.AddColorstop (0,7, 'RGBA (120, 120, 120, 0,5)');
RadialGradient.AddColorstop (0,9, 'RGBA (0, 0, 0, 0.8)');
RadialGradient.AddColorstop (1, 'RGBA (238, 238, 238, 1)');
ctx.beginpath ();
ctx.arc (canvas.width/2, canvas.height/2, 300, 0, math.pi * 2, true);
ctx.closepath ();
ctx.fillstyle = RadialGradient;
ctx.fill ();
}