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 相关文章推荐
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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封装的完整分页类示例
2018/08/21 PHP
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
初步讲解Python中的元组概念
2015/05/21 Python
使用python实现rsa算法代码
2016/02/17 Python
Django模板Templates使用方法详解
2019/07/19 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
python判断自身是否正在运行的方法
2019/08/08 Python
python 实现Harris角点检测算法
2020/12/11 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
生物技术研究生自荐信
2013/11/12 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
白酒市场营销方案
2014/02/25 职场文书
合伙协议书范本
2014/04/21 职场文书
小学班级口号
2014/06/09 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
2014年保洁工作总结
2014/11/24 职场文书
2015年党员个人工作总结
2015/05/13 职场文书