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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
JavaScript实现网页计算器功能
Oct 29 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
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
动态生成gif格式的图像要注意?
2006/10/09 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
Javascript中的数学函数
2007/04/04 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
js 异步处理进度条
2010/04/01 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
python实现360的字符显示界面
2014/02/21 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
python使用requests.session模拟登录
2019/08/09 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
python用700行代码实现http客户端
2021/01/14 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
幼儿园教师教育感言
2014/02/28 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
太空授课观后感
2015/06/17 职场文书
运动会通讯稿300字
2015/07/20 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
vue router 动态路由清除方式
2022/05/25 Vue.js