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

最新推荐文章于 2021-11-02 09:35:42 发布

编程界小明哥

最新推荐文章于 2021-11-02 09:35:42 发布

阅读量3.2k

点赞数 6

分类专栏： javascript canvas javascript精彩实例文章标签： javascript canvas

本文链接：https://blog.csdn.net/dkm123456/article/details/113181216

版权

javascript精彩实例同时被 3 个专栏收录

24 篇文章 30 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

javascript

78 篇文章 27 订阅

订阅专栏

canvas

42 篇文章 8 订阅

订阅专栏

利用属性属性 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;

了解本专栏

超级会员免费看

编程界小明哥

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
5
评论
原来写刮刮卡这么简单，几行代码就搞定，你来你也行，谢谢惠顾！

利用属性属性 globalCompositeOperation，设置值为 destination-out，后绘制的图形会擦除与先绘制图形重叠的部分效果图：思路1.写一个div，div的内容就是刮开后的结果；2.画布设置好定位，将div盖住（此时是透明的）；3.在画布上画一个长方形，并使用颜色（这里使用默认的黑色），这就把卡盖住了；4.设置globalCompositeOperation属性为destination-out；4.为画布添加鼠标移动事件，在鼠标的位置画一个小圆，就
复制链接

扫一扫