#mycan {
background-color:transparent;
top:0px;
left:50px;
position:absolute;
z-index:10
}
.myimg {
height:300px;
width:500px;
position:absolute;
top:0px;
left:50px;
}
#img1 {
transform:rotateX(180deg);
}
主要是利用了canvas的globalCompositeOperation = "destination-out";
在与源不重叠的区域上保留目标。其他部分都变成透明的。
这个特性才会让canvas(本身背景色设置透明),然后重叠区域透明。