原生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的并不是一个简单的刮刮乐效果