HTML5 Canvas Progressive Filling และการใช้เอฟเฟกต์ภาพหน้ากากภาพโปร่งใส

ความคิดเห็น: บทความนี้จะแนะนำการตั้งค่าและการใช้ความโปร่งใสในผืนผ้าใบในรายละเอียด การรวมการเติมเต็มและการสนับสนุนความโปร่งใสอย่างค่อยเป็นค่อยไปมันสามารถตระหนักถึงเอฟเฟกต์หน้ากากของภาพ การสาธิตรหัสวิธีการเชิงเส้นแบบ progressive มีดังนี้ เพื่อนที่สนใจสามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน

1: เติมไล่ระดับสี

ผืนผ้าใบรองรับวิธีการเติมเพิ่มสองวิธีหนึ่งคือการเติมแบบเพิ่มเชิงเส้น (เติมเส้นไล่ระดับสี) และอีกวิธีหนึ่งเรียกว่า

การเติมรัศมี API ของพวกเขาคือ:

CreateLineargradient (X1, Y1, X2, Y2);

โดยที่ x1 และ y1 เป็นพิกัดของจุดแรกและ x2 และ y2 เป็นพิกัดของจุดที่สอง

Createradialgradient (X1, Y1, R1, X2, Y2, R2);

โดยที่ X1 และ Y1 เป็นพิกัดของจุดกึ่งกลางแรก R1 คือรัศมี, X2 และ Y2 เป็นพิกัดของจุดกึ่งกลางที่สองและ R2 คือรัศมี

ตั้งค่าสีสำหรับแต่ละจุด

addColorStop (ตำแหน่ง, สี);

ตำแหน่งที่แสดงตำแหน่งช่วงขนาด [0 ~ 1] โดยที่ 0 แสดงถึงจุดแรกและ 1 หมายถึงพิกัดของจุดที่สอง

สีแสดงถึงค่าสีค่าสีของ CSS ใด ๆ

หลังจากสร้างและกำหนดค่าวัตถุ Progressive Fill แล้วมันสามารถใช้เพื่อตั้งค่าข้อความการใช้งาน Strokestyle และ Fillstyle ของบริบท

การเติมสีแบบก้าวหน้าของรูปทรงเรขาคณิต

การสาธิตรหัสของแนวทางเชิงเส้นแบบก้าวหน้า:

1. สีก้าวหน้าในทิศทางแนวตั้ง (y)

// ทิศทาง/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. ความก้าวหน้าสีแนวนอน (x) ทิศทาง

// ทิศทาง/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. แนวตั้งและแนวนอนพร้อมกัน (ทิศทาง xy) สีก้าวหน้า

// ทิศทางแนวตั้งและแนวนอน

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: โปร่งใส

การสนับสนุนความโปร่งใสในผืนผ้าใบแบ่งออกเป็นการตั้งค่าความโปร่งใสทั่วโลกและท้องถิ่น การตั้งค่าความโปร่งใสทั่วโลกสามารถตั้งค่าได้

Context.globalalpha ถูกนำมาใช้ ความโปร่งใสในท้องถิ่นสามารถตั้งค่าผ่านช่องทาง Fillstyle ไปยัง Alpha Value Channel ในค่าสี

เพื่อให้บรรลุ สองวิธีของรหัสมีดังนี้:

// เปลี่ยนค่าอัลฟ่าทั่วโลก

ctx.globalalpha = 0.5;

ctx.fillrect (50,50,75,50);

// เปลี่ยน alphachannel สีสไตล์การเติม

ctx.fillstyle = 'rgba (225,225,225,0.5)';

ctx.fillrect (50,50,75,50);

เอฟเฟกต์ทั้งสองเหมือนกัน

สาม: เอฟเฟกต์หน้ากากที่โปร่งใสและค่อยเป็นค่อยไปของภาพถ่าย

ใช้การไล่ระดับสีรัศมีและการเปลี่ยนแปลงความโปร่งใสเพื่อให้ได้เอฟเฟกต์หน้ากากโปร่งแสงต่อภาพและเอฟเฟกต์การเรียกใช้สคริปต์:

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

-