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 相关文章推荐
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 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 微信开发获取用户信息如何实现
2016/12/13 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python制作数据导入导出工具
2015/07/31 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
python实现自主查询实时天气
2018/06/22 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
python sort、sort_index方法代码实例
2019/03/28 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
小学生清明节演讲稿
2014/09/05 职场文书
社区服务活动报告
2015/02/05 职场文书
销售合作意向书范本
2015/05/08 职场文书
cf战队宣传语
2015/07/13 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
golang正则之命名分组方式
2021/04/25 Golang
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
MySQL 计算连续登录天数
2022/05/11 MySQL