مثال
رسم المستطيلات باستخدام قيمتين globalCompositeOperation مختلفة. المستطيلات الحمراء هي destination images . المستطيلات الزرقاء هي source images :
مصدر أكثر
المقصد أكثر
جافا سكريبت:
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);
انها محاولة لنفسك » دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
| خاصية | |||||
|---|---|---|---|---|---|
| globalCompositeOperation | 4.0 | تسعة | 3.6 | 4.0 | 10.1 |
تعريف والاستخدام
مجموعات الملكية globalCompositeOperation أو عوائد كيف يمكن لمصدر (new) يتم رسم الصورة على وجهة (existing) صورة.
مصدر الصورة = الرسومات التي على وشك أن تضع على قماش.
الصورة المستهدفة = الرسومات التي يتم وضعها بالفعل على قماش.
| القيمة الافتراضية: | مصدر أكثر |
|---|---|
| جافا سكريبت بناء الجملة: | context .globalCompositeOperation="source-in"; |
قيم الممتلكات
| القيمة | وصف | العبها |
|---|---|---|
| source-over | افتراضي. يعرض مصدر الصورة فوق الصورة المقصد | العبها " |
| source-atop | يعرض الصورة المصدر على أعلى الصورة الوجهة. جزء من source image الذي هو خارج destination image لا يظهر | العبها " |
| source-in | يعرض صورة مصدر في لصورة الوجهة. الجزء فقط من source image التي هو داخل destination image ويرد، و destination image شفاف | العبها " |
| source-out | يعرض الصورة المصدر إلى الصورة الوجهة. الجزء فقط من source image الذي هو خارج destination image ويرد، و destination image شفاف | العبها " |
| destination-over | يعرض صورة الوجهة عبر مصدر الصورة | العبها " |
| destination-atop | يعرض صورة الوجهة على أعلى الصورة المصدر. جزء من destination image التي هي خارج source image لا يظهر | العبها " |
| destination-in | يعرض صورة جهة في لمصدر الصورة. الجزء فقط من destination image التي هي داخل source image هو مبين، و source image هو شفاف | العبها " |
| destination-out | يعرض صورة المقصد من الصورة المصدر. الجزء فقط من destination image التي هي خارج source image هو مبين، و source image هو شفاف | العبها " |
| lighter | يعرض الصورة المصدر + صورة المقصد | العبها " |
| copy | يعرض صورة المصدر. يتم تجاهل الصورة المستهدفة | العبها " |
| xor | يتم الجمع بين الصورة المصدر باستخدام OR خاص مع صورة المقصد | العبها " |
<كائن قماش