قماش GlobalCompositeOperation

افتراضيًا، إذا تم رسم كائن (مصدر) أعلى كائن آخر (هدف) في Canvas، فسيقوم المتصفح ببساطة بتراكب صورة الكائن المصدر أعلى صورة الكائن الهدف.

بكل بساطة، في Canvas، من خلال الجمع بين مصدر الصورة والصورة المستهدفة من خلال عملية globalCompositeOperation في Canvas، يمكنك الحصول على تأثيرات مختلفة، مثل الشكل التالي:

كما هو موضح في الصورة أعلاه، تتحول التفاحة الحمراء والدائرة السوداء إلى تفاحة حمراء مقضومة من خلال destination-out من globalCompositeOperation . بمعنى آخر، من خلال تركيب الصور في Canvas، يمكننا تحقيق بعض التأثيرات الفريدة، مثل أننا نريد إنشاء تأثير يانصيب بطاقة الصفر. اليوم سوف نتعلم كيفية استخدام تركيب الصور في Canvas.

يوجد إجمالي 26 نوعًا من القيم لسمة globalCompositeOperation في Canvas، وسينتج كل نوع تأثيرات مختلفة. بالطبع، قد ترى أن التأثيرات ستكون مختلفة، وقد لا يتم عرض بعض التأثيرات بشكل طبيعي في المتصفح. لكن لا يهم، دعونا نفهم ببساطة معاني وتأثيرات هذه الأنواع الستة والعشرين.

 ctx.save(); ctx.translate(w / 2, h / 2); ctx.fillStyle = 'red'; ctx.arc(-40, 20, 80, 0, Math.PI * 2, صحيح); ctx. ClosePath();

سيرسم الكود أعلاه دائرة حمراء بنصف قطر 80px على لوحة القماش، والتي تسمى مصدر الصورة هنا.

 ctx.fillStyle = 'orange'; ctx.beginPath(); ctx.fill(); ()؛

سيرسم هذا الكود دائرة برتقالية يبلغ نصف قطرها 80px على لوحة القماش، والتي تسمى هدف الصورة هنا. من خلال تعيين قيمة globalCompositeOperation بين مصدر الصورة والصورة المستهدفة، يمكن إكمال عملية تركيب الصورة:

 ctx.save(); ctx.translate(w / 2, h / 2); ctx.fillStyle = 'red'; ctx.arc(-40, 20, 80, 0, Math.PI * 2, true); ctx. ClosePath(); ctx.globalCompositeOperation = 'source-in'; ctx.fillStyle = 'orange'; ctx.beginPath(); ()؛

التأثير الذي تم الحصول عليه في هذا الوقت هو كما يلي:

source-over هي القيمة الافتراضية لخاصية globalCompositeOperation . يغطي الرسم المصدر الرسم الهدف ويتم عرض الرسم المصدر في الأجزاء غير الشفافة من الرسم المصدر، ويتم عرض الرسم الهدف في الباقي.

source-in : يتم رسم فقط أجزاء الرسم الهدف والرسم المصدر المتداخلة وغير الشفافة.

source-out : سيتم رسم الجزء غير المتداخل من الرسم الهدف والرسم المصدر.

source-atop : سيتم رسم الرسومات المستهدفة في الجزء المتداخل من محتوى الرسومات المستهدفة والرسومات المصدر.

destination-over : سيتم رسم الرسومات الوجهة خلف الرسومات الوجهة ومحتوى الرسومات المصدر.

destination-in : سيتم الاحتفاظ بالجزء المتداخل من الرسم الوجهة والرسم المصدر (الرسم المصدر)، وسيتم عرض الباقي بشفافية

لن يتم عرض الآخرين واحدًا تلو الآخر. يمكن العثور هنا على الوصف المحدد المطابق لكل قيمة.

هناك خاصيتان globalAlpha و globalCompositeOperation في Canvas للتحكم في عمليات تركيب الصورة:

• globalAlpha : ضبط شفافية الصورة. القيمة الافتراضية للخاصية globalAlpha هي 1 ، مما يشير إلى العتامة الكاملة، ويمكن ضبطها من 0 (شفافة بالكامل) إلى 1 (معتمة بالكامل). يجب تعيين هذه القيمة قبل رسم الرسم البياني
• globalCompositeOperation : تتحكم قيمة هذه السمة في رسم الرسومات في الصورة النقطية لـ Canvas الحالية بعد globalAlpha وجميع التحويلات حيز التنفيذ.

في أعمالنا اليومية، غالبًا ما نرى تأثيرات اليانصيب مثل بطاقات الشحن. إذا استخدمنا Canvas للقيام بذلك، فسنستخدم تركيب صور Canvas.

 <div id=card> <canvas id=canvasOne width=500 height=300></canvas> </div>

نقوم بعرض الجائزة (إذا كانت صورة) كخلفية div#card . ثم ارسم أولاً مستطيلًا رماديًا (الصورة المصدر) في Canvas، ثم ارسم صورة جديدة ديناميكيًا من خلال أحداث الماوس (أو أحداث اللمس) (وهذا يشبه الفرشاة)، وقم بتعيين قيمة سمة globalCompositeOperation إلى destination-out (جديدة) رسم سيتم الاحتفاظ بالأجزاء غير المتداخلة من الرسومات ومحتوى الرسومات الموجود بالفعل في اللوحة القماشية المستهدفة). عندما يكون مسح الفرشاة أكبر من نسبة معينة، احذف عنصر <canvas> أو استخدم clearRect() لمسح لوحة Canvas. لإظهار خلفية div

في هذه المقالة، نقدم بشكل أساسي تركيب الصور في Canvas. في Canvas، يمكن التحكم في عملية تركيب الصورة من خلال سمتين، globalAlpha و globalCompositeOperation، لتحقيق تأثير تركيب الصورة. آمل أن يكون مفيدًا للتعلم للجميع، وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.