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 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
详解js闭包
Sep 02 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 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
坏狼的PHP学习教程之第1天
2008/06/15 PHP
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
jQuery调用WebService的实现代码
2011/06/19 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
小程序实现密码输入框
2020/11/16 Javascript
python登陆asp网站页面的实现代码
2015/01/14 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
运行Python编写的程序方法实例
2020/10/21 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
一道SQL面试题
2012/12/31 面试题
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
工程资料员岗位职责
2014/03/10 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
上海世博会口号
2014/06/19 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
辩护词格式
2015/05/22 职场文书
春节晚会开场白
2015/05/29 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers