-
原生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的 并不是一个简单的刮刮乐效果
原生JS实现刮刮乐功能
最新推荐文章于 2024-07-12 15:10:34 发布