ویژگی globalCompositeOperation کانواس HTML
تعریف و استفاده
globalCompositeOperation تنظیمات ویژگیها یا بازگشتدهی به روشی که یک تصویر منبع (جدید) روی یک تصویر هدف (موجود) رسم میشود.
تصویر منبع = نقاشیای که قصد دارید روی کانواس قرار دهید.
تصویر هدف = نقاشیای که شما در روی کانواس قرار دادهاید.
مثال
مثال 1
با استفاده از مقدارهای مختلف globalCompositeOperation مستطیلها را رسم کنید. مستطیل قرمز تصویر هدف است. مستطیل آبی تصویر منبع است:
source-over destination-over
JavaScript:
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);
مثال 2
تمام مقدارهای globalCompositeOperation:
نحوهی نوشتن
context.globalCompositeOperation="source-in";
مقدار ویژگی
| مقدار | توضیحات |
|---|---|
| source-over | پیشفرض. نمایش تصویر منبع بر روی تصویر هدف. |
| source-atop | نمایاندن تصویر منبع در بالای تصویر هدف. بخشی از تصویر منبع که خارج از تصویر هدف قرار دارد، دیده نمیشود. |
| source-in | نمایاندن تصویر منبع درون تصویر هدف. فقط بخشی از تصویر منبع درون تصویر هدف نمایش داده میشود، تصویر هدف شفاف است. |
| source-out | نمایاندن تصویر منبع خارج از تصویر هدف. فقط بخشی از تصویر منبع خارج از تصویر هدف نمایش داده میشود، تصویر هدف شفاف است. |
| destination-over | منبع تصویر کے اوپر مقصد تصویر کو دکھائیں، |
| destination-atop | منبع تصویر کے اوپر مقصد تصویر کو دکھائیں، منبع تصویر کے باہر مقصد تصویر کا حصہ نہیں دکھائیں، |
| destination-in | منبع تصویر میں مقصد تصویر کو دکھائیں، صرف منبع تصویر میں مقصد تصویر کا حصہ دکھائیں، منبع تصویر شفاف ہوگا۔ |
| destination-out | منبع تصویر کے باہر مقصد تصویر کو دکھائیں، صرف منبع تصویر کے باہر مقصد تصویر کا حصہ دکھائیں، منبع تصویر شفاف ہوگا۔ |
| lighter | منبع تصویر + مقصد تصویر کو دکھائیں، مقصد تصویر کو استعمال کیا جاتا ہے۔ |
| کپی | منبع تصویر کو دکھائیں، مقصد تصویر کو نہیں دیکھیں، مقصد تصویر کو نہیں استعمال کیا جاتا۔ |
| xor | اس کے ذریعے منبع تصویر اور مقصد تصویر کو ایکس اور آپریشن پر مشتمل کرنا ہوتا ہے۔ |
تکنیکی تفصیلات
| مقصد: | source-over |
|---|
بریور سپورٹ
جداول میں شمار کا اشارہ اس کی اپنی پہلی بریور کی نسلیں سے کیا گیا ہے جو اس کی خاصیت کو پورا طور پر دعما رہی ہے。
| کروم | ایج | فائرفاکس | سافری | آپریا |
|---|---|---|---|---|
| کروم | ایج | فائرفاکس | سافری | آپریا |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
نوٹ:اینٹرنیشنل ایکسپلورر 8 اور اس سے پہلے کی نسلیں <canvas> عنصر کو نہیں دعما رہی ہیں。
