canvas实战之刮刮卡

1.效果图

canvas实战之刮刮卡_第1张图片

2.html及css


      您的浏览器不支持canvas,请升级!
 

   
   
   

3.js

4..总结

  • 这个案例主要是搞清楚这个属性 globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上。注意值是用的 destination-out,在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示,源图像是透明的。

  • 在设置图片合成方式那里,注意前面是目标图像,后面是源图像。

  •  

你可能感兴趣的:(canvas实战之刮刮卡)