مثال
رسم المستطيلات باستخدام قيمتين globalCompositeOperation مختلفة. المستطيلات الحمراء عبارة عنصور الوجهة.المستطيلات الزرقاء هيمصدر الصور:
مصدر أكثر
وجهة الإفراط
جافا سكريبت:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);
انها محاولة لنفسك » دعم المتصفح
إنترنت إكسبلورر 9، فايرفوكس، أوبرا، وكروم، وسفاري يدعم الخاصية globalCompositeOperation.
ملاحظة: إنترنت إكسبلورر 8 والإصدارات السابقة، لا تدعم <canvas> العنصر.
تعريف واستخدام
مجموعات الملكية globalCompositeOperation أو عوائد كيف يتم رسمها مصدر (جديد) صورة على وجهة صورة (موجودة).
الطبقة = "notranslate" مصدر الصورة = الرسومات التي على وشك أن تضع على قماش.
destination image = الرسومات التي يتم وضعها بالفعل على قماش.
| القيمة الافتراضية: | مصدر أكثر |
|---|---|
| جافا سكريبت بناء الجملة: | context.globalCompositeOperation="source-in"; |
قيم الملكية
| القيمة | وصف | العبها |
|---|---|---|
| source-over | افتراضي. يعرض مصدر الصورة فوق الصورة المقصد | العبها " |
| source-atop | يعرض الصورة المصدر في أعلى الصورة الوجهة. لا يظهر جزء منالصورة المصدرالذي هو خارجالصورة المستهدفة | العبها " |
| source-in | يعرض صورة مصدر في لصورة الوجهة. يظهر جزء فقط منالصورة المصدرالموجود داخلالصورة المستهدفة،وصورة الوجهة شفافة | العبها " |
| source-out | يعرض الصورة المصدر إلى الصورة الوجهة. يظهر جزء فقط منالصورة المصدرالذي هو خارجالصورة المستهدفة،وصورة الوجهة شفافة | العبها " |
| destination-over | يعرض صورة الوجهة عبر مصدر الصورة | العبها " |
| destination-atop | يعرض صورة الوجهة على الجزء العلوي من الصورة المصدر. لا يظهر جزء منالصورة الوجهةالتي هي خارجالصورة المصدر | العبها " |
| destination-in | يعرض صورة جهة في لصورة المصدر. يظهر جزء فقط منالصورة الوجهةالتي هو داخلالصورة المصدر،ومصدر الصورة هو شفاف | العبها " |
| destination-out | يعرض صورة المقصد من الصورة المصدر. يظهر جزء فقط منالصورة الوجهةالتي هي خارجالصورة المصدر،ومصدر الصورة هو شفاف | العبها " |
| lighter | يعرض مصدر الصورة + صورة المقصد | العبها " |
| copy | يعرض صورة المصدر. يتم تجاهل الصورة المستهدفة | العبها " |
| xor | يتم الجمع بين الصورة المصدر باستخدام OR خاص مع صورة المقصد | العبها " |
مثال
كل قيم الخاصية globalCompositeOperation:
المصدر على:
مصدر فوق:
المصدر في:
مصدر من:
وجهة الإفراط في:
الوجهة فوق:
المقصد في:
المقصد-الخروج:
ولاعة:
نسخ:
XOR: