原生JS实现刮刮乐功能

• 原生JS实现刮刮乐功能

• 原生JS是基础 这里刮刮乐主要是使用到了HTML5新特性中的canvas特性 也就是canvas标签
• 先上效果图
• 
• 
• 就是这样一个简单的小例子

• HTML部分

• 
• 就是属于一个很简单的一个页面 这里是有使用到定位 让我们的canvas标签定位到我们呢显示的容器上面就行，当然大小要保持一致

• CSS部分

• 
• CSS部分的代码量也很少，因为我只是简单的做了一个Demo，最主要的就是将canvas转化为block块元素，然后通过定位让他定位到container元素的上面即可

• js部分

• 
• 最主要的就是要知道canvas的几个特殊的方法
• let ctx = canvas.getContext(‘2d’) 初始化一个2d的画布
• ctx.fillStyle = '#c0c0c0’为画布添加背景颜色
• ctx.fillRect(0, 0, 300, 150) 画布所填充的范围
• ctx.clearRect(e.clientX, e.clientY, 12, 12) 清空画布的范围

• 其实canvas是一个蛮简单的操作 我们是可以做出一个画板工具的Demo的 并不是一个简单的刮刮乐效果