CanvasRenderingContext2D.globalCompositeOperation
De CanvasRenderingContext2D
.globalCompositeOperation
onderdeel van de Canvas 2D API verandert het type van renderen van nieuwe figuren. Hierbij is type een string die de nieuwe rendermodus geeft.
Bekijk ook het hoofdstuk Compositing in de Canvas Tutorial.
Syntax
ctx.globalCompositeOperation = type;
Types
Examples
globalCompositeOperation
gebruiken
Dit is maar een klein stukje code die de globalCompositeOperation
property gebruikt om twee rechthoeken te tekenen die elkaar erbuiten houden waar ze overlappen.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'xor';
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
Bewerk de code hieronder en zie de veranderingen:
Specificaties
Specificatie | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'CanvasRenderingContext2D.globalCompositeOperation' in that specification. |
Living Standard | |
Compositing and Blending Level 1 | Candidate Recommendation |
Browserondersteuning
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Standaard | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Blendmodus | (Yes) | (Yes) | 20 (20) | ? | ? | (Yes) |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Standaard | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Blendmodus | ? | ? | (Yes) | 20.0 (20) | ? | ? | ? | ? |
WebKit/Blink-specifieke opmerkingen
- In WebKit- and Blink-gebaseerde Browsers, is een niet-standaard en afgewezen functie
ctx.setCompositeOperation()
gebruikt voor deze operatie. - Ondersteuning "plus-darker" en "darker" zijn verwijderd in Chrome 48. Ontwikkelaars zoeken een vervanging die "darken" moet gebruiken.
Gecko-specifieke opmerkingen
- Een vroege Canvas-specificatie draft heeft de waarde "darker", maar Firefox verwijderde ondersteuning voor "darker" in versie 4 (bug 571532). Bekijk ook deze blogpost die de
difference
value aanraad om een gelijk effect als "darker" te maken.
Bekijk ook
- De interface die het definieert:
CanvasRenderingContext2D
CanvasRenderingContext2D.globalAlpha