canvas图层

Posted 2020-10-10 corn林

（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);

注：（1）globalCompositionOperation 可能值。

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

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

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

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

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

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

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

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

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

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

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

（2）不同浏览器对该属性的实现存在较大差异。