کانواس globalCompositeOperation نمائش کی اپریشن

Canvas مراجعہ دستاویز

تعریف اور استعمال

globalCompositeOperation کیا کس طرح سے ایک سورس (نئا) تصویر کو مقصد ( موجود ) تصویر پر درآرائی جائے گا یا اس کا رجوع کیا جائے گا، اس کا معاملہ ہے۔

سورس تصویر = آپ کانواس پر رکھنا چاہتے ہیں کا تصویر ہے。

مقصد تصویر = آپ نے کانواس پر رکھا ہوا تصویر ہے。

مثال

مثال 1

مختلف globalCompositeOperation کا ورودی استعمال کرکے مستطیل درآرائیں۔ لال مستطیل مقصد تصویر ہے۔ نیلا مستطیل سورس تصویر ہے:

　　　　　source-over 　　　　　　　　　　　　destination-over

Your browser does not support the canvas tag.

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 属性值：

亲自试一试

Syntax

context.globalCompositeOperation="source-in";

Attribute Value

Value Description
source-over 默认。 مقصد تصویر پر مورچی تصویر کو دکھائیجئے。
source-atop مقصد تصویر کے اوپر مورچی تصویر کو دکھائیجئے۔ مورچی تصویر کو مقصد تصویر کے باہر کا حصہ نہیں دیکھا جائے گا。
source-in مقصد تصویر میں مورچی تصویر کو دکھائیجئے۔ صرف مقصد تصویر کے اندر مورچی تصویر کا حصہ دکھائیجائے گا، مقصد تصویر شفاف ہوگا。
source-out مقصد تصویر کے باہر مورچی تصویر کو دکھائیجئے۔ صرف مقصد تصویر کے باہر مورچی تصویر کا حصہ دکھائیجائے گا، مقصد تصویر شفاف ہوگا。
destination-over مورچی تصویر کے اوپر مقصد تصویر کو دکھائیجئے。
destination-atop مورچی تصویر کے اوپر مقصد تصویر کو دکھائیجئے۔ مورچی تصویر کے باہر مقصد تصویر کا حصہ دکھائیجائے نہیں گا。
destination-in مورچی تصویر میں مقصد تصویر کو دکھائیجئے۔ صرف مورچی تصویر کے اندر مقصد تصویر کا حصہ دکھائیجائے گا، مورچی تصویر شفاف ہوگا。
destination-out مورچی تصویر کے باہر مقصد تصویر کو دکھائیجئے۔ صرف مورچی تصویر کے باہر مقصد تصویر کا حصہ دکھائیجائے گا، مورچی تصویر شفاف ہوگا。
نرم دکھائیجئے مورچی تصویر + مقصد تصویر。
کپی کریجئے دکھائیجئے مورچی تصویر۔ مقصد تصویر کو چھوڑ دیجئے。
xor منفرد آپریشن کا استعمال سے ذریعہ منبع عکس اور مقصد عکس کو ترکیب کیا جاتا ہے۔

تکنیکی تفصیلات

مقصد: source-over

براہ راست کا استعمال

جداول میں دیکھئے گئے شماریات، پہلی براہ راست اس خاص خاصیت کا استعمال کرنے والی براہ راست نکلاواری کی نسلیں کا ذکر کرتی ہیں۔

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

تعلیمات:Internet Explorer 8 اور اس سے پہلے کی نسلیں <canvas> علامت کو نہیں دعomit پاتی ہیں۔

Canvas مراجعہ دستاویز