HTML5实现刮奖效果
原文:HTML5实现刮奖效果
要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果。而HTML5的canvas API中有一个属性globalCompositeOperation,这个属性有多个值,而实现刮奖效果要用到的值就是destination-out。意思就是:在已有内容和新图形不重叠的地方,已有内容保留,所有其他内容成为透明。这样可能不好理解,后面实现的时候会解释。有了globalCompositeOperation这个属性,实现过程就很简单了。
我们需要有两个层,上面一层肯定是一个canvas元素,因为要能刮开就要用到画布。下面一层其实用什么元素都可以,既然上层用的是canvas元素,下层我们也用canvas元素,下面是html内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>刮刮乐</title>
</head>
<body>
<canvas id="underCanvas" width=300 height=300 style="position: absolute; left: 0;top: 0;"></canvas>
<canvas id="upCanvas" width=300 height=300 style="position: absolute; left: 0; top: 0;"></canvas>
<script src="./scratch.js"></script>
<script>
// 可能变化的值放在options中,方便修改
var options = {
text: {
fontWeight: "bold",
fontSize: 30,
fontFamily: "Arial",
align: "center",
color: '#F60'
},
maskColor: "red",
radius: 30,
awards: ["一等奖", "二等奖", "三等奖", "谢谢!"]
};
new Scratch(options).init();
</script>
</body>
</html>
先实现一个构造函数:
var Scratch = function (options) {
// 下层画布元素
this.underCanvas = doc.getElementById("underCanvas");
// 上层画布元素
this.upCanvas = doc.getElementById("upCanvas");
// 获取下层画布绘图上下文
this.underCtx = this.underCanvas.getContext("2d");
// 获取上层画布绘图上下文
this.upCtx = this.upCanvas.getContext("2d");
// 画布宽度
this.width = this.upCanvas.width;
// 画布高度
this.height = this.upCanvas.height;
// 自定义选项
this.options = options;
this.award = null;
};
在下层画布上画上刮奖的内容:
drawText: function () {
var ctx = this.underCtx;
var text = this.options.text;
ctx.font = text.fontWeight + " " + text.fontSize + 'px ' + text.fontFamily;
ctx.textAlign = text.align;
ctx.fillStyle = text.color;
this.award = this.options.awards[(Math.random() * this.options.awards.length) | 0]; //随机抽奖
ctx.fillText(this.award, this.width / 2, this.height / 2 + text.fontSize / 2);
}
这边奖的内容是随机出现的,因为奖肯定有很多种,可以用一个数组来存放奖的内容,然后随机显示:
this.award = this.options.awards[(Math.random() * this.options.awards.length) | 0];
如果不知道上面的位运算是什么意思,可以参考我写的上一篇文章"js中位运算的运用"。
然后在上层画布中画一层涂层:
drawMask: function () {
var ctx = this.upCtx;
ctx.fillStyle = this.options.maskColor;
ctx.fillRect(0, 0, this.width, this.height);
ctx.globalCompositeOperation = 'destination-out';
}
在上层画布中用了globalCompositeOperation这个属性,当再在画布上画东西时,那么后面画的内容和涂层重合的部分将变透明,而其余涂层部分不变。就是利用了这个原理实现了刮奖效果。
需要刮开上层的涂层,就需要在上层画布上绑定事件:
addEvent: function () {
var that = this;
var upCanvas = this.upCanvas;
var callback1, callback2, callback3;
upCanvas.addEventListener("mousedown", callback1 = function (evt) {
upCanvas.addEventListener("mousemove", callback2 = function (evt) {
var x = evt.clientX - upCanvas.offsetLeft;
var y = evt.clientY - upCanvas.offsetTop;
var ctx = that.upCtx;
var options = that.options;
ctx.beginPath();
var gradient = ctx.createRadialGradient(x, y, 0, x, y, options.radius);
// 其实这边的颜色值是可以随便写的,因为都会变成透明,重要的是透明度
gradient.addColorStop(0, "rgba(255, 255, 255, 0.5)");
gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
// 也可以不用渐变,直接用一种颜色,但渐变效果更好
ctx.fillStyle = gradient;
ctx.arc(x, y, options.radius, 0, Math.PI * 2, true);
ctx.fill();
ctx.closePath();
// 当刮开部分>80%的时候提醒刮奖结果,这个可以自己设置
if (that.result() > 0.8) {
alert(that.award);
upCanvas.removeEventListener("mousemove", callback2);
}
}, false);
doc.addEventListener("mouseup", callback3 = function () {
upCanvas.removeEventListener("mousemove", callback2);
doc.removeEventListener("mouseup", callback3);
}, false);
}, false);
}
我们需要在刮到一定程度时提醒刮奖的结果:
result: function () {
// 获取文字部分的宽、高
var textWidth = this.options.text.fontSize * this.award.length;
var textHeight = this.options.text.fontSize;
// 获取文字部分的像素,这样可以根据刮开文字的部分占全部文字部分的百分比来提示结果,比如说在刮开80%的时候提示刮奖结果
var imgData = this.upCtx.getImageData(this.width / 2 - textWidth / 2, this.height / 2 - textHeight / 2, textWidth, textHeight);
var pixelsArr = imgData.data;
var transPixelsArr = [];
for (var i = 0, j = pixelsArr.length; i < j; i += 4) {
// a代表透明度
var a = pixelsArr[i + 3];
// 渐变的透明度<=0.5,其实透明度的值是介于0~255之间的,0.5 * 255 = 127.5就是a的值
if (a < 128) {
transPixelsArr.push(a);
}
}
// 小于128的透明度的值的个数占总透明度的的个数的百分比
return transPixelsArr.length / (pixelsArr.length / 4);
}
上面用到了getImageData()方法,这个方法返回像素数据。重要的是我们只是获取了下层文字部分的像素数据,因为我们只需要知道刮开的文字部分占全部文字部分的百分比。
调用构造函数时,把可能改变的东西放在一个对象options中传递给构造函数:
// 可能变化的值放在options中,方便修改
var options = {
// 文字部分的样式
text: {
fontWeight: "bold",
fontSize: 30,
fontFamily: "Arial",
align: "center",
color: '#F60'
},
// 图层颜色
maskColor: "red",
// 画逼半径
radius: 20,
// 奖项
awards: ["一等奖", "二等奖", "三等奖", "谢谢!"]
};
new Scratch(options).init();
完整代码可以查看Github:https://github.com/lwzhang/scratch
DEMO:http://lwzhang.github.io/scratch/scratch.html
HTML5实现刮奖效果的更多相关文章
- HTML5 Canvas实战之刮奖效果
近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理 原理很简单,就是在刮奖区添加两个canvas, ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 使用MDScratchImageView实现刮奖效果
使用MDScratchImageView实现刮奖效果 https://github.com/moqod/iOS-Scratch-n-See 最终效果: 其实这是使用了别人的东西而已:) 源码: // ...
- canvas写的一个刮奖效果
<!DOCTYPE html><head> <meta charset="utf-8"> <meta http-equiv="X ...
- HTML5 Canvas实战之刮奖效果【转】
开源项目地址:https://github.com/artwl/Lottery 作者博客地址:http://www.cnblogs.com/jscode/p/3580878.html 谢谢浏览!
- canvas 利用canvas中的globalCompositeOperation 绘制刮奖 效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- 使用PorterDuffXfermode画出刮刮奖效果p146-p148
package com.zzw.Qunyinzghuan3; import android.content.Context; import android.graphics.Bitmap; impor ...
- 使用HTML5实现刮刮卡效果
你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...
- JS框架_(JQuery.js)模拟刮奖
百度云盘:传送门 密码:6p5q 纯CSS模拟刮奖效果 <!DOCTYPE html> <html lang="en"> <head> < ...
随机推荐
- C++面试宝典2011版
1.new.delete.malloc.free关系 delete会调用对象的析构函数,和new相应free仅仅会释放内存,new调用构造函数.malloc与free是C++/C语言的标准库函数,ne ...
- 匿名方法,Lambda表达式,高阶函数
原文:匿名方法,Lambda表达式,高阶函数 匿名方法 c#2.0引入匿名方法,不必创建单独的方法,因此减少了所需的编码系统开销. 常用于将委托和匿名方法关联,例如1. 使用委托和方法关联: this ...
- 用Jstack跟踪Cpu占用率的Java线程(转)
以下方法在centOS下执行通过:1.先定位占用cpu高的进程 top 2.使用以下命令 ps p 14766 -L -o pcpu,pid,tid,time,tname,stat,psr | sor ...
- linux如何执行后台进程
linux直接执行一个过程.电流指令结束后.或者关闭掉shell形成过程将结束. 如何在后台执行的处理 办法1 采用nohup命令,nohup命令本身的意思no hung up他说,他们将不会收到sh ...
- WPF技术触屏上的应用系列(六): 视觉冲击、超炫系统主界面、系统入口效果实现
原文:WPF技术触屏上的应用系列(六): 视觉冲击.超炫系统主界面.系统入口效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体 ...
- Directx11学习笔记【五】 基本的数学知识----向量篇
本文参考dx11龙书 Chapter1 vector algebra(向量代数) 要想学好游戏编程,扎实的数学知识是尤为重要的,下面将对dx11龙书中有关向量的数学知识做一下总结. 在数学中,几何向量 ...
- Android利用网络编程HttpClient批量上传(一个)
请尊重他人的劳动成果.转载请注明出处:Android网络编程之使用HttpClient批量上传文件 我曾在<Android网络编程之使用HTTP訪问网络资源>一文中介绍过HttpCient ...
- 【.NET进程通信】初探.NET中进程间通信的简单的实现
转载请注明出处:http://blog.csdn.net/xiaoy_h/article/details/26090277 废话不多说,IPC就是进程间通信. 进程间通信能够採用的方法非常多,比方创建 ...
- 搜索引擎排名不友好的五个地点-SEO
搜索引擎(百度/谷歌/雅虎)排名不友好的五个地点 别的站点,推断标准和考核得分点是不 一样的,避免对百度排名不友好的五种站点操作 你的站点是否在这五种站点里,决定你的站点能否获得排 名. 1.有没有同 ...
- windows屏幕保护程序opengl模板
Visual Studio 2013 屏幕保护程序opengl模板 ScreenSaver.cpp #define VC_EXTRALEAN #include <windows.h> #i ...