js+canvas实现刮刮奖功能


Posted in Javascript onSeptember 13, 2020

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js post方式传递提交的实现代码
May 31 Javascript
javascript的内存管理详解
Aug 07 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
js+css3实现简单时钟特效
Sep 13 #Javascript
jquery实现简易验证插件封装
Sep 13 #jQuery
利用H5api实现时钟的绘制(javascript)
Sep 13 #Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 #Javascript
返回上一个url并刷新界面的js代码
Sep 12 #Javascript
Vue和React有哪些区别
Sep 12 #Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 #Javascript
You might like
PHP4引用文件语句的对比
2006/10/09 PHP
用php来检测proxy
2006/10/09 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
php去除数组中重复数据
2014/11/18 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
python实用代码片段收集贴
2015/06/03 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
如何理解python中数字列表
2020/05/29 Python
Python configparser模块应用过程解析
2020/08/14 Python
Python Django路径配置实现过程解析
2020/11/05 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
家长会演讲稿范文
2014/01/10 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
信用卡催款律师函
2015/05/27 职场文书
庆七一主持词
2015/06/29 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers