大众学开发——59秒学习编写刮刮乐游戏

德国叁肆钢高品质厨具 04-03 87

前言：

此时兄弟们对“h5幸运刮刮乐源码”大体比较看重，你们都想要分析一些“h5幸运刮刮乐源码”的相关知识。那么小编在网摘上汇集了一些关于“h5幸运刮刮乐源码””的相关内容，希望大家能喜欢，看官们快快来学习一下吧！

前言

本视频通过59秒快速带大家了解JS实现游戏刮刮乐的全过程，大家不妨可以动手尝试一下。如万一出现困难可以积极与我沟通，我将无偿提供技术支持及源代码。

视频学习

视频加载中...

效果预览

开始分析

创建canvas设置图片设置遮罩插入文档绑定鼠标移动事件检查是否超出50%——移除遮罩

难点、API说明

绘制灰色矩形

var context = canvas.getContext('2d');

context.fillStyle = 'grey';

context.fillRect(0, 0, canvas.width, canvas.height)

擦除

canvaslet ctx = canvas.getContext('2d');

ctx.globalCompositeOperation = "destination-out";

绘制圆形

ctx.arc(x, y, 20, 0, 2 * Math.PI);

ctx.fill();