Kompozycja kolorów (HTML5 canvas) - Blog Zielonego Smoka

Zielony Smok - logo witryny

Kompozycja kolorów na canvas

B – niebieski kwadrat – jest obiektem aktualnie istniejącym na canvas i jest 'destination’ (miejscem przeznaczenia).

A – czerwone koło – jest obiektem, który jest dodawany i jest 'source’ (obiektem źródłowym).

Domyślnym składaniem jest source-atop.

Operacja	Opis
copy	Wyświetla tylko A.
destination-atop	Wyświetla B tylko w miejscach, gdzie A i B się nakładają. Wyświetla A w miejscach gdzie A i B się nie nakładają.
destination-in	Wyświetla B tylko w obszarze, w którym A i B nakładają się. A nie jest wyświetlane.
destination-out	Wyświetla B tylko w obszarze, w którym A i B nie nakładają się. A nie jest wyświetlane.
destination-over	Wyświetla całe B, A A tylko w miejscy, gdzie A i B nie nakładają się.
lighter	W obszarach, gdzie A i B nakładają się wyświetla sumę A i B. Tam gdzie się nie nakładają wyświetla A i B normalnie.
darker	W obszarach, gdzie A i B nakładają się wyświetla różnicę A i B. Tam gdzie się nie nakładają wyświetla A i B normalnie.
source-atop	Wyświetla A tam gdzie A i B nakładają się, a B tam gdzie A i B nie nakładają się.
source-in	Wyświetla A tylko w obszarze gdzie A i B nakładają się. B nie jest wyświetlane.
source-out	Wyświetla A tylko w obszarze, gdzie A i B nie nakładają się. B nie jest wyświetlane.
source-over	Wyświetla całe A, a B tylko w miejscach, gdzie A i B nie nakładają się.
xor	Wyświetla A i B w obszarach, w których nie nakładają się. Nic nie wyświetla w miejscach, gdzie A i B nakładają się.

Opcje dla `globalCompositeOperation`

Listing

     var compositeTypes = [
            'source-over','source-in','source-out','source-atop',
            'destination-over','destination-in','destination-out',
            'destination-atop','lighter','darker','copy','xor'
         ];
         function drawShape() {
            for (i=0;i<compositeTypes.length;i++) {
               var label = document.createTextNode(compositeTypes[i]);
               document.getElementById('lab'+i).appendChild(label);
               var ctx = document.getElementById('tut'+i).getContext('2d');

               // draw rectangle
               ctx.fillStyle = "#FF3366";
               ctx.fillRect(15,15,70,70);

               // set composite property
               ctx.globalCompositeOperation = compositeTypes[i];

               // draw circle
               ctx.fillStyle = "#0066FF";
               ctx.beginPath();
               ctx.arc(75,75,35,0,Math.PI*2,true);
               ctx.fill();
            }
         }