Pengisian progresif dan ketelusan Kanvas HTML5 untuk mencapai kemahiran tutorial kesan topeng imej

Pengisian progresif dan ketelusan Kanvas HTML5 untuk mencapai kemahiran tutorial kesan topeng imej_html5

WBOY

Lepaskan： 2016-05-16 15:49:18

asal

1315 orang telah melayarinya

Terangkan secara terperinci tetapan parameter dan penggunaan pengisian progresif dalam Kanvas HTML5, tetapan dan penggunaan ketelusan dalam Kanvas, dan gabungkan pengisian progresif dan sokongan ketelusan untuk mencapai kesan Topeng imej.

1: Isian Kecerunan (Isi Kecerunan)
Kanvas menyokong dua kaedah pengisian progresif, satu ialah Isian Kecerunan Garis (Isi Kecerunan Garis), dan satu lagi dipanggil
Ia ialah RadialGradient Fill. API ialah:
createLinearGradient(x1, y1, x2, y2); dengan x1, y1 ialah koordinat titik pertama dan x2, y2 ialah koordinat titik kedua.
createRadialGradient(x1, y1, r1, x2, y2, r2); , dan r2 ialah jejari.
Tetapkan warna untuk setiap titik
addColorStop(kedudukan, warna
di mana kedudukan mewakili kedudukan, julat saiz [0~1], 0 mewakili titik pertama, 1 mewakili koordinat kedua); titik
Warna mewakili nilai warna, sebarang nilai warna CSS.
Selepas objek isian progresif dicipta dan dikonfigurasikan, ia boleh digunakan untuk menetapkan Gaya stroke dan Gaya isian konteks untuk melaksanakan teks,
Pengisian warna secara beransur-ansur bentuk geometri.

Demonstrasi kod kaedah kecerunan linear:

1 Kecerunan warna arah Menegak (Y)

Salin. KodKodnya adalah seperti berikut:

// arah menegak/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)'); .fillStyle = lineGradient;
ctx.fillRect(0, 0, 300, 300); >

Salin kod

Kodnya adalah seperti berikut:

//horizontal/X arah

var lineGradient = ctx.createLinearGradient (0, 50, 200, 50); 1, 'rgba(255 , 255, 0, 1)');

ctx.fillStyle = lineGradient; 3. Perkembangan warna menegak dan mendatar pada masa yang sama (arah XY)

Salin kod

Kodnya adalah seperti berikut:

// arah menegak dan mendatar

var lineGradient = ctx.createLinearGradient (0, 0, 200, 200); lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)');
lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)'); lineGradient; ctx.fillRect(0, 0, 300, 300); Kanvas menyokong tetapan ketelusan global dan tempatan Tetapan ketelusan global boleh dicapai dengan menetapkan Context.globalAlpha. Ketelusan setempat boleh dicapai dengan menetapkan saluran nilai alfa
dalam nilai warna melalui fillStyle. Kod untuk kedua-dua kaedah adalah seperti berikut:
// tukar nilai alfa global

ctx.globalAlpha=0.5;

ctx.fillRect(50,50,75,50); alphachannel warna gaya isian ctx.fillStyle = 'rgba(225,225,0.5)'; ctx.fillRect(50,50,75,50);

3: Kesan Topeng Kecerunan Lutsinar Foto

Gunakan kecerunan warna jejari dan perubahan ketelusan untuk mencapai kesan topeng lut sinar pada imej, kesan larian skrip:

Salin kod

Kod tersebut adalah seperti berikut:
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, benar);
ctx.closePath();
ctx.fillStyle = radialGradient;
ctx.fill();
}