html两个画布位置重叠,【HTML5】Canvas之globalCompositeOperation重叠模式属性详解

globalCompositeOperation即Canvas中的合成操作。

1、source-over

这是默认值，他表示绘制的图形将画在现有画布之上html>

$(document).ready(function(){

var canvas=document.getElementById("myCanvas");

var context=canvas.getContext("2d");

context.fillStyle="rgb(63,169,245)";

context.fillRect(50,50,100,100);

context.globalCompositeOperation="source-over"

context.fillStyle="rgb(255,123,172)";

context.fillRect(100,100,100,100);

});

2、destination-over

这个操作的值与前一个值相反，所以现在目标绘制在源之上html>

$(document).ready(function(){

var canvas=document.getElementById("myCanvas");

var context=canvas.getContext("2d");

context.fillStyle="rgb(63,169,245)";

context.fillRect(50,50,100,100);

context.globalCompositeOperation="destination-over"

context.fillStyle="rgb(255,123,172)";

context.fillRect(100,100,100,100);

});

3、source-atop

这个操作会将源绘制在目标之上，但是在重叠区域上两者都是不透明的。绘制在其他位置的目标是不透明的，但源是透明的。html>