书小宅之网页设计——元素重叠globalCompositoOporation

本文链接：https://blog.csdn.net/qq_36447261/article/details/97611064

globalCompositoOporation 属性设置或返国如何将- 个源(新的)图像绘制到目标(已有)的图像上。
源图像=打算放置到画布上的绘图。
目标图像=已经放置在画布上的绘图。
下面图例中红圆为源图像，蓝色正方形是目标图像。
在这里插入图片描述
属性值：
source-over默认，在目标图像上显示源图像。
source-atop在目标图像顶部显示源图像。源图像位于目标图像之外的部分时不可见的。
source-in在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out在目标图像外显示源图像。只会显示目标图像之外的源图像部分，目标图像是透明的。
destination-over在源图像上方显示目标图像。
destination-atop在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in在目标图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter显示源图像+目标图像。
copy显示源图像。沪铝目标图像。
xor使用异或操作对原图像与目标图像进行组合。

代码示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘图时旋转单一对象</title>
<style>
   #myc{margin :auto;display:block;}
</style>
</head>

<body>
<div id="fix"><h2>关于global...
<canvas id="myc"</canvas>

<script>
var c=document.getElementById("myc");
	c.width=window.innerWidth;
	c.height=window.innerHeight;
	c.style.backgroundColor="black";
var ctx=c.getContext("2d");	
var rect=[],//用于放置绘制矩形属性值的数组
	circle=[],//用于放置绘制圆形属性值的数组
	dx=20,//两个矩形之间间隔的距离
	dy=5,//矩形向下运行的速度，基本速度，而后用随机函数进行改变
	n=c.width/dx; 
	//每行所绘制的窗口的个数，会随窗口的变化而变化
	
	//为数组rect从尾部追加属性值
	for(i=0;i<n;i++){
		rect.push({
			//位置：x坐标，每隔dx向右增加一个方形
			x:dx*i,
			//位置：y坐标，不超过画布高度
			y:Math.random()*c.height,
			//宽度
			w:10,
			//高度
			h:Math.random()*c.height/4+30,
			//下降速度
			dy:Math.random()*dy+1,
			//矩形条的不透明度
			opc:Math.random()
		})
	}
	//为数组circle从尾部追加属性值
	for(i=0;i<50;i++){
		circle.push({
			x:Math.random()*c.width,
			y:Math.random()*c.height,
			r:Math.random()*120+30,
			//圆的速度
			s:Math.random()*5
		})
	}
	//设置填充样式
	ctx.fillStyle="#001132";
	
	function draw(){
		//画布消除
		ctx.clearRect(0,0,c.width,c.height);
		//绘制全部矩形
		for(i=0;i<n;i++){
			ctx.globalAlpha=rect[i].opc;
			ctx.fillRect(rect[i].x,rect[i].y,rect[i].w,rect[i].h);
			//矩形往下走
			rect[i].y+=rect[i].dy;
			//矩形到下边界返回起点
			if(rect[i].y>=c.height){
				rect[i].y=-rect[i].h;
			}	
		}	
		//绘制全部圆形
		for(i=0;i<10;i++){
			ctx.fillStyle="#056";
			ctx.globalAlpha=1;
			ctx.beginPath();
			//源图与目标图的操作
			ctx.globalCompositeOperation="lighter";
			ctx.arc(circle[i].x,circle[i].y,circle[i].r,0,2*Math.PI);
			ctx.fill();
			//圆往上走
			circle[i].y-=circle[i].s;
			if(circle[i].y<=-circle[i].r){
				circle[i].y=c.height+100;
			}	
		}
		requestAnimationFrame(draw);	
	}
	draw();
</script>
</body>
</html>