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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/263885.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java多线程复习_Java多线程复习

一、线程的基本概念简单的说&#xff1a;线程就是一个程序里不同的执行路径在同一个时间点上cpu只会有一个线程在执行Java里的多线程是通过java.lang.Thread类来实现的每个线程都拥有自己独立的方法栈空间二、java线程的创建和启动第一种定义线程类实现Runnable接口Thread myTh…

HTML段落自动换行的样式设置

在HTML的P标记中&#xff0c;默认情况下是自动换行的。 如果你的段落是由中文字符或者英文单词组成的&#xff0c;这基本没什么问题。但是如果你的段落是由不间断的英文字母&#xff08;浏览器会认为是一个单词&#xff09;组成&#xff0c;则默认情况下不会换行&#xff0c;将…

DES加密/解密

1 /// <summary>2 /// DES加密(数据加密标准&#xff0c;速度较快&#xff0c;适用于加密大量数据的场合)3 /// </summary>4 /// <param name"EncryptString">待加密的密文</param>5 /// <param name&qu…

Spring中使用Spark连接的DataSource

在Spring中配置Spark hive-thriftserver的连接DataSource与配置其他数据源连接方式是一样的&#xff0c;如一般Oracle数据源配置&#xff0c;使用如下必须的Jar包&#xff1a;使用JDBC程序示例&#xff1a;package com.hadoop.test;import java.sql.Connection; import java.sq…

中文字符匹配java_java正则匹配HTML中a标签里的中文字符示例

java正则匹配HTML中a标签里的中文字符示例发布于 2020-8-12|复制链接摘记: 本文实例讲述了java正则匹配HTML中a标签里的中文字符。分享给大家供大家参考&#xff0c;具体如下&#xff1a;今天群里一位朋友问到了一个正则表达式的问题&#xff0c;有如下内容&#xff1a;xhtml特…

多语言制作工具(2013-01-24更新,支持VS2005、2008、2010、2012)(已开源)

前一段时间&#xff0c;制作了一个多语言资源文件制作工具&#xff0c;现在把这个工具集成到VS2005、VS2008&#xff0c;vs2010中&#xff0c;以增加VS自身资源编辑界面&#xff0c;对多资源编辑的麻烦&#xff0c;简化多语言资源文件的制作。 这个插件是和VS的项目绑定的&…

尚学人工智能课程---1、大数据和人工智能介绍

尚学人工智能课程---1、大数据和人工智能介绍 一、总结 一句话总结&#xff1a; 机器学习是什么&#xff1a;数据背后体现的客观算法&#xff1a;人在电脑上留下的大量日志可以反映人的性格和习惯 深度学习是什么&#xff1a;神经网络如果深度大于3&#xff0c;就是深度学习 神…

Flatten Binary Tree to Linked List (DFS)

Given a binary tree, flatten it to a linked list in-place. For example,Given 1/ \2 5/ \ \3 4 6The flattened tree should look like: 1\2\3\4\5\6代码&#xff1a; class Solution{ public:void flatten(TreeNode *root) {if(rootNULL) return;TreeNode* proot-…

mysql 回表查询优化_MySQL优化:如何避免回表查询?什么是索引覆盖?

转自&#xff1a;https://mp.weixin.qq.com/s?__bizMjM5ODYxMDA5OQ&mid2651962609&idx1&sn46e59691257188d33a91648640bcffa5&chksmbd2d092d8a5a803baea59510259b28f0669dbb72b6a5e90a465205e9497e5173d13e3bb51b19&mpshare1&scene1&srcid&sh…

安装 Windows 自动化 API 3.0 后,Visual Studio 2010 的运行速度更快

安装 Windows 自动化 API 3.0 后&#xff0c;Visual Studio 2010 的运行速度更快 本文适用于以下产品&#xff1a; Microsoft Visual Studio 2010如果未安装 Windows 自动化 API 3.0&#xff0c;则使用 Windows 自动化 API 的应用程序会明显降低 Microsoft Visual Studio Inte…

cocos2d-x3.2创建项目

mac&#xff1a; 1.用终端进入/Users/lixiang/Desktop/cocos2d-x-3.2/tools/cocos2d-console/bin目录执行./cocos.py。 &#xff08;出现Permission denied&#xff0c;是权限问题&#xff0c;可以先使用chmod命令获得权限&#xff0c;输入chmod ux ./cocos.py 回车&#xff0c…

使用ASP.Net WebAPI构建REST服务(一)——简单的示例

由于给予REST的Web服务非常简单易用&#xff0c;它越来越成为企业后端服务集成的首选方法。本文这里介绍一下如何通过微软的Asp.Net WebAPI快速构建REST-ful 服务。 首先创建一个Asp.Net Web应用程序&#xff08;我这里用的是Visual Studio 2013&#xff0c;它已经内置了Web AP…

网页游戏服务器配置

最近要架设一个网页游戏&#xff0c;就到硬件市场配了一台服务器&#xff0c;下面是具体的配置清单&#xff1a; Intel Xeon 5310 1.6G 1350  金士顿4GB DDR2 667(ECC FB DIMM)*2 全缓冲处理内存 680*2  主板 Intel S5000VSA 1750  硬盘 320G SATA*2 450*2   国鑫GX514…

Linux sudo命令详解

Linux sudo命令以系统管理者的身份执行指令&#xff0c;也就是说&#xff0c;经由 sudo 所执行的指令就好像是 root 亲自执行。 使用权限&#xff1a;在 /etc/sudoers 中有出现的使用者。 简单的说&#xff0c;sudo 是一种权限管理机制&#xff0c;管理员可以授权于一些普通用户…

告别花瓶:2015年智能电视路在何方?

智能手机与平板在IT市场风生水起&#xff0c;让几岁小孩到大爷大妈们都对玩手机、平板乐此不彼。曾经辉煌几十年的电视行业&#xff0c;如今又重新融合了智能系统以全新的面貌出现在人们面前。多家互联网企业对这一“翻新”的市场虎视眈眈&#xff0c;并推出了多款智能电视。但…

文件类型

转载于:https://www.cnblogs.com/hlc-123/p/10958326.html

灾备还缺一套评价体系

1月10日&#xff0c;灾备技术产业联盟正式成立。这样一个中立的、由业内众多厂商和大型用户组成的、以服务为宗旨的联盟将为我国灾备技术和应用的规范化发展做出积极贡献。经过一年多的酝酿、历经7次筹备会议&#xff0c;由华为、北京邮电大学、中治研国际信息技术研究院和中国…

DFS知识点

2019-06-01 11:14:34 加油&#xff0c;坚持&#xff01;&#xff01;&#xff01; 1. 2. 3. 转载于:https://www.cnblogs.com/Artimis-fightting/p/10960409.html

Sery送的书与网站短信解决方案

今天Sery&#xff08;http://sery.blog.51cto.com/&#xff09;在qq上说要送我一本他刚写的书《互联网运营智慧》&#xff0c;因为里面引用了我写的一段程序。 #!/usr/bin/perl -w use strict; use LWP::Simple; use URI::Escape; use Digest::MD5; my ($mobile, $content) AR…

兰州财经大学JAVA期末考什么_兰州财经大学大学国文下答案

兰州财经大学大学国文下答案更多相关问题建立HSE管理体系可提高企业安全、环境和健康()。A.管理水平B.操作水平C.使用水平D.能源水平计算机保存矢量图形实际上是存储描述矢量图形的一组绘图指令及有关的参数&#xff0c;因此 矢量图形的存储取样频率、量化精度将影响录制数字音…