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 相关文章推荐
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
JS中判断null的方法分析
Nov 21 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 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
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
Python引用模块和查找模块路径
2016/03/17 Python
Python pymongo模块用法示例
2018/03/31 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
Python算法中的时间复杂度问题
2019/11/19 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
python中常见错误及解决方法
2020/06/21 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
外企求职信范文分享
2013/12/31 职场文书
创先争优活动心得体会
2014/09/04 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
MySQL三种方式实现递归查询
2022/04/18 MySQL