DDR爱好者之家 Design By 杰米
本文实例为大家分享了js+canvas实现刮刮奖的具体代码,供大家参考,具体内容如下
1.实现了PC端的刮刮奖效果
2.使用了canvas的文本,像素操作,合成,绘制图形,随机数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>刮刮奖</title> <style type="text/css"> * { margin: 0; padding: 0; } .box { width: 500px; height: 500px; margin: 0 auto; position: relative; background: #00BFFF; } #prize { width: 300px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -150px; background: #fff; font-family: "微软雅黑"; font-size: 40px; text-align: center; line-height: 100px; -webkit-user-select: none; } #myCanvas { position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -150px; } </style> </head> <body> <div class="box"> <div id="prize"></div> <canvas id="myCanvas" width="300" height="100"></canvas> </div> </body> <script type="text/javascript"> //获取对象 var textArr = ["一等奖", "二等奖", "三等奖", "谢谢惠顾", "再来一次"]; var prize = document.getElementById("prize"); var num = Math.random() * 100; if (num <= 60) { prize.innerText = textArr[3]; } else if (num <= 70) { prize.innerText = textArr[4]; } else if (num <= 80) { prize.innerText = textArr[2]; } else if (num <= 90) { prize.innerText = textArr[1]; } else if (num <= 100) { prize.innerText = textArr[0]; } var myCanvas = document.getElementById("myCanvas"); // 搭建环境 var cxt = myCanvas.getContext("2d"); cxt.globalAlpha = 1; cxt.fillStyle = "#ccc"; cxt.fillRect(0, 0, 300, 100); var txt = "刮刮奖"; cxt.fillStyle = "#000"; cxt.font = "30px 微软雅黑"; cxt.textAlign = "center"; cxt.textBaseline = "middle"; cxt.fillText(txt, 150, 50, 300); var mX, mY; var flag = false; myCanvas.onmousedown = function(e) { flag = true; mX = e.offsetX; mY = e.offsetY; drawArc(mX, mY); } document.body.onmousemove = function(e) { if (flag == true) { mX = e.offsetX; mY = e.offsetY; drawArc(mX, mY); } } document.body.onmouseup = function() { flag = false; sayPrize(); } function drawArc(x, y) { cxt.globalCompositeOperation = "destination-out"; //相交部分不显示 cxt.beginPath(); cxt.fillStyle = "white"; cxt.moveTo(x, y); cxt.arc(x, y, 10, 0, 2 * Math.PI); cxt.fill(); } function sayPrize() { var myImg = cxt.getImageData(70, 30, 160, 40); // var myImg = cxt.getImageData(93, 37, 40, 30); // 设置像素点的颜色 var num = 0; var max = myImg.data.length / 4; for (var i = 0; i < myImg.data.length; i += 4) { if (myImg.data[i + 3] <= 200) { num++; } } //2/3*myImg.data.length/4 if (num >= max * 0.6) { alert("恭喜您,获得:" + prize.innerText); } } </script> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年05月05日
2024年05月05日
- 吕方《爱一回伤一回》[WAV+CUE][454M]
- 鸿雁组合.2013-《草原最强音》天艺[WAV+CUE]
- 群星.1987-地球大合唱(LP版)【WAV+CUE】
- 金海心-《拥抱爱》[WAV+CUE]
- 杨千嬅《千嬅盛放》3CD[WAV+CUE][1.8G]
- 《莫扎特经典代表作品集》[FLAC][1.7G]
- 张信哲《梦想》[WAV分轨][459M]
- 拥金卓玛-伊敏河[正版CD低速原抓WAV+CUE]
- 辛宝儿《浅唱岁月》天弦文化醉美暖声拥吻梦想[WAV+CUE]
- 梁紫丹《城市足臃[母带级重生金CD正版CD低速原抓WAV+CUE
- 中唱唱片群星《好歌珍藏-感恩.赞美1》WAV+CUE
- 中唱唱片群星《好歌珍藏-故乡.家园》2CD【WAV+CUE】
- ChrisBotti-ChrisBottiInBoston(克里斯·波提:波士顿音乐会)(2008-9-18)[WAV+CUE]
- 乡村民谣Paul O′Brien《Walk Back Home》[DFF][1.6G]
- 郑秀文《华纳超极品音色系列》[FLAC][927M]