Składanie kolorów – operacje

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

A – niebieskie 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 Wyswietla 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();
            }
         }
            

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *