HTML5 Canvas Progressive Filling dan Implementasi Efek Topeng Gambar Transparan

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.

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 ();

}