“刮刮乐”竟如此简单hello大家好，我是小九九的爸爸。想必大家都玩过刮刮乐，那今天我们还是使用Canvas相应的API

hello大家好，我是小九九的爸爸。想必大家都玩过刮刮乐，那今天我们还是使用Canvas相应的API来完成这个效果。

先看一下实现效果：

在正式讲解之前，在线征求一下，我想换个名字，感觉现在的这个名字有点2啊，哎，有没有什么比较好的名字，大家可以分享一下。

之前我们讲过如何使用canvas相关API去实现“小球跟随鼠标移动”的效果，今天在它的基础上，我们做下改进。

标签元素如下：

<div class="text">恭喜你，中奖啦</div>
<canvas></canvas>

我们来给他们添加一些样式，用于保证canvas标签可以与div标签重叠。

.text {
    margin-top: 300px;
    margin-left: 100px;
    width: 500px;
    height: 100px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
canvas {
    position: absolute;
    top: 300px;
    left: 100px;
}

现在我们来修改一下上篇文章里，draw方法的实现。其实很简单，就是把清空的动作给注释掉就可以了。

class Canvas {
    draw(ball){
        this.canvasContext.beginPath();
        this.canvasContext.arc(ball.centerX, ball.centerY, ball.radius, 0, 2 * Math.PI, true);
        this.canvasContext.fillStyle = ball.background;
        this.canvasContext.fill();
        this.canvasContext.closePath();
    }
}

let ball = new Ball(
    centerX: 0,
    centerY: 0,
    radius: 7,
    background: '#fff'
)

现在的大致效果应该是下面这样：

这样看看是不是就有那味了呢，现在唯一的问题就是如何将背后的“文字”显示出来。

globalCompositeOperation属性闪亮登场。

光看名字就知道，它是用来定义如何进行合成操作的。

它的取值范围有挺多，据我目测，不下10个。在这里我们只讲解destination-out这个值。

它的含义是：“仅保留现有画布内容和新形状不重叠的部分。”

那这不正是我们想要的结果吗，重合的部分被剔除了，只保留不重合的部分。

我们沿着这个思路来修改一下draw方法：

// 执行绘画方法
draw(ball){
    this.canvasContext.globalCompositeOperation = 'destination-out';
    this.canvasContext.beginPath();
    this.canvasContext.arc(ball.centerX, ball.centerY, ball.radius, 0, 2 * Math.PI, true);
    this.canvasContext.fillStyle = ball.background;
    this.canvasContext.fill();
    this.canvasContext.closePath();
}

每次绘画的时候就将 globalCompositeOperation 类型置为 destination-out。

这样，一个简单的“刮刮乐”效果就实现了，那么屏幕前的小伙伴，你学废了吗？我们下期再见～～