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>