超级会员免费看
本文介绍了如何利用JavaScript和Canvas的globalCompositeOperation属性实现刮刮卡效果。通过在Canvas上设置destination-out模式，配合鼠标移动事件，可以轻松创建出刮开覆盖层显示隐藏内容的交互体验。
利用属性属性 globalCompositeOperation，设置值为 destination-out，后绘制的图形会擦除与先绘制图形重叠的部分
效果图：
思路
1.写一个div，div的内容就是刮开后的结果；
2.画布设置好定位，将div盖住（此时是透明的）；
3.在画布上画一个长方形，并使用颜色（这里使用默认的黑色），这就把卡盖住了；
4.设置globalCompositeOperation属性为destination-out；
4.为画布添加鼠标移动事件，在鼠标的位置画一个小圆，就会达到擦除的效果了
完整代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="GBK">
<title>
订阅专栏 解锁全文
扫一扫
911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
