#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(本身背景色设置透明),然后重叠区域透明。