原来写刮刮卡这么简单，几行代码就搞定，你来你也行，谢谢惠顾！

利用属性属性 globalCompositeOperation，设置值为 destination-out，后绘制的图形会擦除与先绘制图形重叠的部分

效果图：

思路

1.写一个div，div的内容就是刮开后的结果；

2.画布设置好定位，将div盖住（此时是透明的）；

3.在画布上画一个长方形，并使用颜色（这里使用默认的黑色），这就把卡盖住了；

4.设置globalCompositeOperation属性为destination-out；

4.为画布添加鼠标移动事件，在鼠标的位置画一个小圆，就会达到擦除的效果了

完整代码

<!DOCTYPE html>
<html><head lang="en"><meta charset="GBK"><title></title><style>
*{margin: 0;padding: 0;
}
canvas{position: absolute;left:200px;border:1px solid ;top: 10px;cursor: pointer;
}
#guaguaka{position:absolute;left:200px;width: 200px;

原来写刮刮卡这么简单，几行代码就搞定，你来你也行，谢谢惠顾！相关推荐

ibm软件工程师含金量_令人难以理解的软件工程师：几千行代码能搞定的为什么要写几万行？...
原标题:令人难以理解的软件工程师:几千行代码能搞定的为什么要写几万行? 一我们公司的 Windows 版软体已经有十多年的历史,经过历代工程师的整治之后,内容已经凌乱不堪.过去三个月,我找时间自己重 ...
python爬取豆瓣读书简单_Python用16行代码就搞定了爬取豆瓣读书页面
点击蓝字"python教程"关注我们哟! 我们一直说Python比较简单,代码体量没有别的程序那么大,对于初学者,尤其是零编程基础的初学者来说,感触没有那么明显,那么今天就让你见识 ...
python爬取豆瓣读书简单_Python用16行代码就搞定了爬取豆瓣读书页面！
我们一直说Python比较简单,代码体量没有别的程序那么大,对于初学者,尤其是零编程基础的初学者来说,感触没有那么明显,那么今天就让你见识一下:爬取豆瓣读书页面,Python用16行代码就搞定了! p ...
难以理解的软件工程师：几千行代码能搞定为什么要写几万行？
导读:"所以程序高手原本就不多,而一直继续在写程序的程序高手就更是稀有了."本文是一位从业多年的软件工程师分享的经验和看法,他提到的一些现象,槽点颇多,应该是从业人员都会遇到的,不 ...
jquery练习03_手写扫雷(全网最强jquery练习)，扫雷游戏 150行代码轻松搞定
5 扫雷 5.1 扫雷规则展示信息:总雷数剩余雷数(总雷数-插旗数) 用时规格:难度增加=雷数增加+类概率增加: 10% 15% 20% 状态:被点击(触雷+周围0雷+周围n雷+插旗)+未点击 ...
unity游戏,隐私协议最简单解决方案!仅3行代码就搞定!（转载）
起因最近各个平台的隐私协议,监管越来越严,游戏需要明确自己的隐私协议是做啥的,需要在所有sdk没有启动前,就向用户展示隐私协议. 由于我是使用unity开发,所以自己找了一个方法,去做到这个隐私协议 ...
python简单好玩的代码_只需要9步100行Python代码就可以实现一个简单又好玩的弹球游戏...
今天给大家分享一个有趣又好玩的弹球的游戏,一来可以把类的知识融会一下,二来加深对Python的兴趣.你会发现哎呀Python写小游戏还是蛮方便的,蛮有意思的~~ 需要本文源码:私信回复[源码]即可获取 ...
u盘电视测试软件,智能电视安装软件无法识别U盘怎么办？简单几招教你搞定！...
原标题:智能电视安装软件无法识别U盘怎么办?简单几招教你搞定! U盘是智能电视及网络机顶盒安装软件必备的工具,但是也经常会出现U盘插在智能设备上不识别的情况,那么针出现这类情况有哪些原因呢?又该如何解 ...
移动信号4g显示无服务器,手机没信号？4G变成E？简单几步，轻松搞定！
原标题:手机没信号?4G变成"E"?简单几步,轻松搞定! 随着市面上各种手机信号放大器的普及和人们对手机信号放大器知识的认知提升,近年来手机信号放大器市场可谓十分火爆,各家各户都基 ...

原来写刮刮卡这么简单，几行代码就搞定，你来你也行，谢谢惠顾！

利用属性属性 globalCompositeOperation，设置值为 destination-out，后绘制的图形会擦除与先绘制图形重叠的部分

效果图：

思路

完整代码

原来写刮刮卡这么简单，几行代码就搞定，你来你也行，谢谢惠顾！相关推荐

最新文章

热门文章