التعليق: ستقدم هذه المقالة إعدادات واستخدام الشفافية في قماش بالتفصيل. الجمع بين الدعم التدريجي للملء والشفافية ، يمكن أن يدرك تأثير قناع الصورة. عرض رمز الطريقة التقدمية الخطية هو كما يلي. يمكن للأصدقاء المهتمين الرجوع إليها. آمل أن يكون ذلك مفيدًا للجميع.
اشرح إعدادات المعلمة واستخدام الملء التدريجي في قماش HTML5 بالتفصيل ، وإعدادات واستخدام الشفافية في قماش ، مع دعم التعبئة والشفافية التدريجية ، لتحقيق تأثير قناع الصور.1: ملء التدرج
يدعم القماش طريقتين متزايدة ، واحدة هي ملء تدريجي خطي (ملء التدرج الخط) ، والآخر يسمى
ملء RadialGradient. واجهات برمجة التطبيقات الخاصة بهم هي:
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.
بعد إنشاء كائن التعبئة التدريجي وتكوينه ، يمكن استخدامه لتعيين نص تنفيذ Strokestyle في السياق.
ملء اللون التدريجي من الأشكال الهندسية.
رمز عرض النهج التقدمي الخطي:
1. اللون التدريجي في الاتجاه الرأسي (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 إلى قناة قيمة ألفا في قيمة اللون
لتحقيق ذلك. طريقتان الكود هما كما يلي:
// تغيير قيمة ألفا العالمية
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.natoralheight) ؛
var radialgradient = ctx.createDialGradient (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.hight/2 ، 300 ، 0 ، math.pi * 2 ، true) ؛
ctx.closepath () ؛
ctx.fillstyle = radialgradient ؛
ctx.fill () ؛
}