కాన్వాస్ globalCompositeOperation అంశం
నిర్వచనం మరియు వినియోగం
globalCompositeOperation అంశాల సెట్టింగ్ లేదా పునరుద్ధరించడం ద్వారా ఒక మూల చిత్రాన్ని లక్ష్య చిత్రంపై చిత్రీకరించే విధం నిర్వహించండి.
మూల చిత్రం = మీరు కాన్వాస్ పైన పెట్టనున్న చిత్రం.
లక్ష్య చిత్రం = మీరు కాన్వాస్ పైన పెట్టిన చిత్రం.
ఉదాహరణ
ఉదాహరణ 1
వివిధ globalCompositeOperation విలువలతో వెండిరెడ్డి వర్పులను చిత్రీకరించండి. ఎరుపు వర్పు లక్ష్య చిత్రం. నీలి వర్పు మూల చిత్రం:
source-over destination-over
జావాస్క్రిప్ట్:
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 | డిఫాల్ట్. లక్ష్య చిత్రంపై మూల చిత్రాన్ని చూపు. |
| సోర్స్-ఆటాప్ | లక్ష్య చిత్రం పైన మూల చిత్రాన్ని చూపు. మూల చిత్రం లక్ష్య చిత్రం బయట ఉన్న భాగాలు అదృశ్యం. |
| సోర్స్-ఇన్ | లక్ష్య చిత్రంలో మూల చిత్రాన్ని చూపు. లక్ష్య చిత్రంలో ఉన్న మూల చిత్రం పారదర్శకం. |
| సోర్స్-ఆఉట్ | లక్ష్య చిత్రానికి బయటకు మూల చిత్రాన్ని చూపు. లక్ష్య చిత్రానికి బయట ఉన్న మూల చిత్రం పారదర్శకం. |
| డెస్టినేషన్-ఓవర్ | మూల చిత్రం పైన లక్ష్య చిత్రాన్ని చూపు. |
| డెస్టినేషన్-ఆటాప్ | మూల చిత్రం పైన లక్ష్య చిత్రాన్ని చూపు. మూల చిత్రం పైన ఉన్న లక్ష్య చిత్రం పారదర్శకం. |
| డెస్టినేషన్-ఇన్ | మూల చిత్రంలో లక్ష్య చిత్రాన్ని చూపు. మూల చిత్రంలో ఉన్న లక్ష్య చిత్రానికి మాత్రమే చూపుతారు, మూల చిత్రం పారదర్శకం. |
| డెస్టినేషన్-ఆఉట్ | మూల చిత్రానికి బయటకు లక్ష్య చిత్రాన్ని చూపు. మూల చిత్రానికి బయట ఉన్న లక్ష్య చిత్రానికి మాత్రమే చూపుతారు, మూల చిత్రం పారదర్శకం. |
| లైటర్ | మూల చిత్రాన్ని + లక్ష్య చిత్రాన్ని చూపు. |
| కాపీ | మూల చిత్రాన్ని చూపు. లక్ష్య చిత్రాన్ని విస్మరించు. |
| 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 以及更早的版本不支持
