English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
عند رسم أشكال على لوحة HTML5، يمكنك تعيين كيفية خلط ما ترسمه مع ما تم رسمه بالفعل على اللوحة. يُقدم هذا المقال كيفية خلط محتوى الرسم مع المحتوى الموجود بالفعل على اللوحة.
يملك سياق الـ 2D اثنين من الخاصيات التي تتحكم في نمط التركيب على اللوحة. هما:
globalAlpha
globalCompositeOperation
تحدد خاصية globalAlpha شفافية/عدم شفافية ما ترسمه. يمكن أن تأخذ قيمًا بين 0 و1. 0 تعني أن ما ترسمه شفاف تمامًا. القيمة 0.5 تعني أن ما ترسمه شفاف جزئيًا. القيمة 1 تعني أن ما ترسمه غير شفاف. القيمة المبدئية هي 1.
يتم تعيين خاصية globalAlpha كما يلي:
context.globalAlpha = 0.5;
تحدد خاصية globalCompositeOperation كيفية خلط ما ترسمه إلى الرسومات الحالية على اللوحة.
يتم تعيين خاصية globalCompositeOperation كما يلي:
context.globalCompositeOperation = "copy";
globalCompositeOperation تشير إلى "المصدر" و"الهدف" وتحدد كيفية خلط المصدر والهدف. المصدر هو ما ترسمه، والهدف هو ما تم رسمه بالفعل. إليك قائمة بالقيم المحتملة ومعانيها:
| قيمة | وصف |
نسخة | في الأماكن التي يتداخل فيها المصدر والهدف، سيتم عرض المصدر. |
destination-atop | عندما يتداخل المصدر والهدف ولا يكونان شفافين، سيتم عرض الهدف.إذا كان الهدف شفافًا، سيتم عرض المصدر. |
destination-in | عندما يتداخل المصدر والهدف ولا يكونان شفافين، سيتم عرض الهدف.في الأماكن التي لا تتداخل فيها لا يتم عرض المصدر. |
destination-out | في الأماكن التي لا تتداخل فيها المصدر والهدف، سيتم عرض الهدف.في أي مكان آخر يظهر الشفافية. |
destination-over | في الأماكن التي يتداخل فيها المصدر والهدف، سيتم عرض الهدف.إذا لم يكن هناك تداخل، سيتم عرض المصدر. |
source-atop | في الأماكن التي يتداخل فيها المصدر والهدف، سيتم عرض المصدر.في الأماكن التي لا تتداخل فيها ولا يكون المصدر شفافًا، سيتم عرض الهدف. |
source-in | عندما يتداخل المصدر والهدف ولا يكونان شفافين، سيتم عرض المصدر.في أي مكان آخر يظهر الشفافية. |
source-out | في الأماكن التي لا تتداخل المصدر والهدف، سيتم عرض المصدر.في أي مكان آخر يظهر الشفافية. |
source-over | يظهر المصدر عندما يكون غير شفاف.يظهر الوجهة في أي مكان آخر. |
lighter | تضاف الألوان المصدر والأهداف معًا، مما يجعل الألوان أكثر إشراقًا وتتحرك نحو قيمة الألوان 1 (أعلى لمعان لللون) |
xor |
هذا هو رسم بياني مثالي يمكنك استخدامه لأشكال المدمجة وأسعار alpha. يمكنك تغيير أنماط المدمجة عن طريق النقر على الزر. يمكنك تغيير أنماط Alpha عن طريق استخدام التحكم الموجود تحت الرسم البياني.
globalAlpha
إذا رأيت حقل النص globalAlpha، أدخل قيمة بين 0 و100. ستحول القيمة إلى قيمة بين 0 و1.0. وإلا استخدم الشريط الموجود.
ملاحظة: عند كتابة هذا المقال، تختلف طرق معالجة Firefox وChrome لهذه الأنماط المدمجة. يبدو أيضًا أنها تختلف عن rects وtext، كيف تعمل هذه الأنماط. جرب أنماط مختلفة في جميع المتصفحات التي تخطط لدعمها لفهم كيف تعمل.