Canvas图层问题

1、globalAlpha用于设值所有绘制的透明度，默认值为0；

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.fillStyle = 'rgba(280,187,188,1)';
context.fillRect(10,10,100,100);

context.globalAlpha = 0.5;//透明度为0.5

context.fillStyle = 'rgba(180,187,188,1)';
context.fillRect(20,20,80,80);

2、globalCompositionOperation表示后绘制的图形怎样与先绘制的图形结合；

context.fillStyle = 'rgba(280,187,188,1)';
context.fillRect(150,150,100,100);

context.globalCompositeOperation = 'source-in';//重叠部分可见，其他透明。

context.fillStyle = 'rgba(180,187,188,1)';
context.fillRect(160,160,80,80);

globalCompositionOperation 可能值：

source-over（默认）：后绘制图层位于前图层上方。

source-in：图层重叠部分可见，其他透明。

source-out：图层不重叠部分可见，先绘制层透明。

source-atop：图层重叠部分可见，先绘制不受影响。

destination-over：后绘制图层位于前图层下方。

destination-in：后绘制图层位于前图层下方，不重叠部分透明。

destination-out：后绘制图形擦除与先绘制图形重叠部分。

destination-atop：后绘制图层位于下方，不重叠部分，先绘制层透明。

lighter：重叠部分的值相加，使该部分变亮。

copy：后绘制图形替代与之重叠的先绘制图形。

xor：重叠部分执行“异或”操作。

canvas图层 - corn林 - 博客园