Zielony Smok

HTML5 canvas – tutorial

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();
            }
         }