详细效果主要看图片
目标图像:前一个图像
源图像:后一个图像
source开头,后一个覆盖前一个
destination开头,前一个覆盖后一个
图片可能不清楚 依次展示的效果为以下属性
source-over
source-in
source-out
source-atop
destination-over(默认值)
destination-in
destination-out
destination-atop
var cans1 = document.getElementById('canvas1');
if(cans1.getContext){
var ctx1 = cans1.getContext('2d');
ctx1.beginPath();
ctx1.fillStyle = 'red'; //源图像
ctx1.fillRect(50,50,100,100);
//图像组合
ctx1.globalCompositeOperation = 'destination-over';
ctx1.fillStyle = 'green'
ctx1.arc(150,150,50,0,Math.PI*2); //目标图像
ctx1.fill();
// ctx1.font = "bold italic 20px arial";
// ctx1.fillStyle = 'black'
// ctx1.fillText('destination-over',20,20);
//目标图像:前一个图像
//源图像:后一个图像
//source开头,后一个覆盖前一个
//destination开头,前一个覆盖后一个}
var cans2 = document.getElementById('canvas2');
if(cans2.getContext){
var ctx2 = cans2.getContext('2d');
ctx2.beginPath();
ctx2.fillStyle = 'red';
ctx2.fillRect(50,50,100,100);
//图像组合
ctx2.globalCompositeOperation = 'destination-in';
ctx2.fillStyle = 'green'
ctx2.arc(150,150,50,0,Math.PI*2);
ctx2.fill();
}
}
另外,开始想在每个canvas标签里都加上文本,但是最后发现失败了,原因:因为不同的图片会只有重叠部分可见等等,所以文本无法直接显示