Paper.jsのBlend Modeを試してみる

BlendModeを指定する

CSSのblend modeと種類は同じ

String('normal', 'multiply', 'screen', 'overlay', 'soft-light', 'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten', 'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color', 'add', 'subtract', 'average', 'pin-light', 'negation', 'source-over', 'source-in', 'source-out', 'source-atop', 'destination-over', 'destination-in', 'destination-out', 'destination-atop', 'lighter', 'darker', 'copy', 'xor')

結構、たくさん用意されています。
・ドキュメント
Paper.js — Item

canvasのglobalCompositeOperationの説明ですが、blend modeが今回と数例被っているので、学習に使えると思います。
http://www.html5.jp/canvas/ref/property/globalCompositeOperation.html

demo

f:id:naoyashiga:20140309204044p:plain
・blend modeを21個実行してみた例
Paper.js Sketch
すべて表示したかったのですが、「source-in」をしてしまうと、円が重なった部分以外消えたので、「source-in」以降はあきらめました
・xor
Paper.js Sketch

code

var circle = new Path.Circle(new Point(80,50),35);
circle.fillColor = "red";

var circle2 = new Path.Circle(new Point(120,50),35);
circle2.style = {
    fillColor:"blue",
    strokeColor:"green",
    strokeWidth:10
};

circle2.blendMode = "xor";