原生JS实现刮刮乐功能

最新推荐文章于 2025-04-14 13:16:06 发布
最新推荐文章于 2025-04-14 13:16:06 发布
阅读量2.5k 收藏 12
点赞数 5
文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46240162/article/details/105490984
版权
  • 原生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的 并不是一个简单的刮刮乐效果
Jimmy雪雪
关注
使用 HTML、CSS 和 JavaScript 定制私人版的刮刮乐【一看就会】
孤寒者的博客
08-24 20万+
刮刮乐想必大家都玩过，小时候兜里一有钱，就喊上小伙伴兴冲冲的跑去家旁边的小卖部，用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱，满眼期待的刮着买来的刮刮乐，心里早已想好中了100块钱大钞要去买好多好多辣条、卡片、陀螺、奥迪双钻的悠悠球… 认认真真看完本文，你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦！（当然如果你没有女朋友的话，也可以用你珍藏多年的美女图片哦！）
原生javascript-刮刮乐的制作
liuhao9999的博客
10-27 476
思路： 效果： <html> <head> <style> * { margin: 0px; padding: 0px; } .guagua { position: relative; width: 300px; height: 100px;...
JavaScript 刮刮乐
weixin_65257540的博客
03-03 1747
效果图 思路 1、设置所需要的样式和排版 2、通过set()得到一个不重复的52个元素的数组。 3、声明一个包含各种奖项的数内容数组。 4、封装函数，由于一共是10行，前面3行都是8列，后面第4行开始逐渐减1，所以需要用到两个循环。 5、声明一个变量来计数，利用九九乘法表的思路来实现，外层循环代表行，每一次创建一个tr，然后计数器++ 6、内层循环代表列，每一次没别创建一个td，添加进行里。 ...
js实现刮刮卡效果
weixin_33912453的博客
07-01 262
<!DOCTYPE html> <html> <body> <canvas/> <script> (function(bodyStyle) { bodyStyle.mozUserSelect = 'none'; bodyStyle.webkitUserSelect = 'n...
JS实现的刮刮卡程序
04-26
NULL 博文链接：https://uule.iteye.com/blog/2348916
js刮刮乐
在无知中学习，在学习中成长，在成长中学习
09-28 478
js刮刮乐
原生JavaScript实现刮刮乐
10-14
主要为大家详细介绍了原生JavaScript实现刮刮乐，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯原生JS实现移动端刮刮乐效果。
baidu_38027860的博客
04-08 4128
话不多数，先上效果图：当挂出超过百分比的时候显示整张图，都可以在构造对象中设置，有疑问可以留言，我看到的话会第一时间回复。好，接下来先上html代码，引用的地址图片你可以随便用，路径之类的有点基础都能修改，并没有加任何难度的代码。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&g...
卡片式刮刮乐功能实现例程
在本节中，我们将探讨如何使用计算机程序实现类似卡片式刮刮乐的功能，以及相关的技术和知识点。 ### 知识点一：随机数生成 实现刮刮乐程序的一个核心部分是随机数生成器。随机数用于模拟刮刮乐彩票中奖号码的生成...
微信小程序 - 实现刮刮乐刮奖功能示例代码，小程序刮卡抽奖翻开答案刮刮卡效果，微信小程序刮刮乐组件插件，用户通过手指移动抹涂卡片刮开显示内容（用于刮奖抽奖、知识卡片刮开显示正确答案，详细示例代码源码）
最新发布
高级前端工程师
04-14 6492
微信小程序刮刮卡，小程序刮刮乐，刮开答案，微信小程序中实现刮刮卡效果，微信小程序canvas实现刮刮乐效果：代码与详细步骤，微信小程序使用画布Canvas实现刮刮乐，用小程序实现根据奖品自适应宽高的刮刮乐、刮奖组件，小程序vue3刮刮乐源码，刮刮乐领奖品的小活动，使用HTML、CSS和JavaScript定制私人版的刮刮乐，微信小程序Canvas 刮刮乐，用Canvas画一个刮刮乐，实现刮刮乐动态效果，vue3 typescript ts刮刮乐，在微信小程序中怎么实现刮刮卡抽奖活动，uniapp小程序刮刮乐
JavaScript实现刮刮乐效果
01-18
刮刮乐怎么做？ 本文实例为大家分享了JavaScript实现刮刮乐效果的具体代码，供大家参考，具体内容如下 来这我教你 1、首先准备好编程软件webStorm或者eclipse都行 2、不会编写代码？给你准备好了 3、如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> <style> .outer{ height: 90px; width: 300px; margin: 0 auto; margin-t
HTML5+JS实现刮刮乐刮刮卡抽奖特效代码
01-02
非常不错的HTML5+JS实现刮刮乐刮刮卡抽奖特效代码，基于jQuery实现，支持响应式手机页面使用， 支持手机涂抹，如今在微营销中经常使用这种方式，用户体验非常的不错。
刮刮卡js源码
07-21
<script type="text/javascript"> $("#wScratchPad2").wScratchPad({ cursor: '/GuaGua/js/mario.png',//鼠标图片 image: '/GuaGua/js/slide1.jpg',//底部图片 scratchMove: function (e, percent) { if (percent > 50 && percent != 100) { this.clear(); //结果处理 } } }); </script>
移动端刮刮乐的实现方式（js+HTML5）
10-20
本篇文章主要介绍了移动端刮刮乐的实现方法以及实现代码。具有很好的参考价值。下面跟着小编一起来看下吧
20行JS代码实现网页刮刮乐效果
12-29
分享一段用canvas和JS制作刮刮乐的代码，JS部分去掉注释不到20行代码 效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body> ![](img/gailun.jpg) <canvas id=canvas width=400 height=300></canvas> </body> 没什么要特别注意的 为了效果加了些CSS样式 CSS部分 <style type=text/css> *{ margin: 0; padding: 0; } img{ width: 400px; height: 300px;
html5 js 实现刮刮卡效果
jhjsxsy的专栏
10-31 1589
body         {             width: 320px;             min-height: 568px;             overflow: hidden;             margin: 0;         }         #canvas         {             background: url(im
JS仿写刮刮乐小例子
m0_46627453的博客
06-24 1000
学习仿写前端用js做一个刮刮乐的案例代码如下： 代码如下： 最后的随机数生成可能有些冗余，下面是另一种方法。 总结 仿写刮刮乐小案例，学到了注意细节不能打错字母，实践和看视频学习还是有区别的，以后要多多实践。...
JS高阶-刮刮乐
我选择轴心，而不漠视旋转
03-02 296
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
php刮刮乐代码,20行JS代码实现网页刮刮乐效果
weixin_34520664的博客
03-10 2295
分享一段用canvas和JS制作刮刮乐的代码，JS部分去掉注释不到20行代码效果如下盖伦.jpg刮刮乐.gifHTML部分![](img/gailun.jpg)没什么要特别注意的为了效果加了些CSS样式CSS部分*{margin: 0;padding: 0;}img{width: 400px;height: 300px;left: 200px;position: absolute;z-index:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值