canvas 模拟实现电子彩票刮刮乐的代码
导读：收集整理的这篇文章主要介绍了canvas 模拟实现电子彩票刮刮乐的代码，觉得挺不错的，现在分享给大家，也给大家做个参考。今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的,非常具有使用价值，有兴趣的可以了解一下。今天给大家带来...
收集整理的这篇文章主要介绍了canvas 模拟实现电子彩票刮刮乐的代码，觉得挺不错的，现在分享给大家，也给大家做个参考。今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的,非常具有使用价值，有兴趣的可以了解一下。今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的，有兴趣的可以改成AndROId版本的，或者其他的~
效果图：
贴一张我中500w的照片，咋办啊，怎么花呢~
好了，下面开始原理：
1、刮奖区域两个Canvas，一个是front ， 一个back ，front遮盖住下面的canvas。
2、canvas默认填充了一个矩形，将下面canvas效果图遮盖，然后监听mouse事件，根据mouSEMove的x,y坐标，进行擦出front canvas上的矩形区域，然后显示出下面的canvas的效果图。
很简单把~嘿嘿~
1、HTML文件内容：
!DOCTYPE html>
html>
head>
tITle>
/title>
meta charset="utf-8">
script type="text/javascript" src="../../jquery-1.8.3.js">
/script>
script type="text/javascript" src="canvas2d.js">
/script>
script type="text/javascript" src="GuaGuaLe2.js">
/script>
script type="text/javascript">
$(function () {
VAR guaguale = new GuaGuaLe("front", "back");
guaguale.init({
msg: "￥5000000.00"}
);
}
);
/script>
style type="text/css">
body {
background: url("s_bd.jpg") repeat 0 0;
}
.container {
position: relative;
width: 400px;
height: 160px;
margin: 100px auto 0;
background: url(s_title.png) no-repeat 0 0;
background-size: 100% 100%;
}
#front, #back {
position: absolute;
width: 200px;
left: 50%;
top: 100%;
margin-left: -130px;
height: 80px;
border-radius: 5px;
border: 1px solid #444;
}
/style>
/head>
body>
p class="container">
canvas id="back" width="200" height="80">
/canvas>
canvas id="front" width="200" height="80">
/canvas>
/p>
/body>
/html>
2、首先我利用了一个以前写的canvas辅助类，留下来今天要用的一些方法：
/** * Created with Jetbrains WebStorm. * User: zhy * Date: 13-12-17 * Time: 下午9:42 * To change this template use File | Settings | File Templates. */ function Canvas2D($canvas) {
var context = $canvas[0].getContext("2d"), width = $canvas[0].width, height = $canvas[0].height, pageOffset = $canvas.offset();
context.font = "24px Verdana, Geneva, sans-serif";
context.textBaseline = "top";
/** * 绘制矩形 * @param start * @param end * @param isFill */ this.drawRect = function (start, end, isFill) {
var w = end.x - start.x , h = end.y - start.y;
if (isFill) {
context.fillRect(start.x, start.y, w, h);
}
else {
context.strokeRect(start.x, start.y, w, h);
}
}
;
/** * 根据书写的文本，得到该文本在canvas上书写的中心位置的左上角坐标 * @param text * @returns {
{
x: number, y: number}
}
*/ this.caculateTextcenterPos = function (text) {
var metrics = context.measureText(text);
console.LOG(metrics);
// context.font = fontSize + "px Verdana, Geneva, sans-serif";
var textWidth = metrics.width;
var textHeight = parseInt(context.font);
return {
x: width / 2 - textWidth / 2, y: height / 2 - textHeight / 2 }
;
}
this.width = function () {
return width;
}
this.height = function () {
return height;
}
this.resetOffset = function () {
pageOffset = $canvas.offset();
}
/** * 当屏幕大小发生变化，重新计算offset */ $(window).resize(function () {
pageOffset = $canvas.offset();
}
);
/** * 将页面上的左边转化为canvas中的坐标 * @param pageX * @param pageY * @returns {
{
x: number, y: number}
}
*/ this.getCanvasPoint = function (pageX, pageY) {
return{
x: pageX - pageOffset.left, y: pageY - pageOffset.top }
}
/** * 清除区域，此用户鼠标擦出刮奖涂层 * @param start * @returns {
*}
*/ this.clearRect = function (start) {
context.clearRect(start.x, start.y, 10, 10);
return this;
}
;
/** *将文本绘制到canvas的中间 * @param text * @param fill */ this.drawTextInCenter = function (text, fill) {
var point = this.caculateTextCenterPos(text);
if (fill) {
context.fillText(text, point.x, point.y);
}
else {
context.strokeText(text, point.x, point.y);
}
}
;
/** * 设置画笔宽度 * @param newWidth * @returns {
*}
*/ this.penWidth = function (newWidth) {
if (arguments.length) {
context.lineWidth = newWidth;
return this;
}
return context.lineWidth;
}
;
/** * 设置画笔颜色 * @param newColor * @returns {
*}
*/ this.penColor = function (newColor) {
if (arguments.length) {
context.strokeStyle = newColor;
context.fillStyle = newColor;
return this;
}
return context.strokeStyle;
}
;
/** * 设置字体大小 * @param fontSize * @returns {
*}
*/ this.fontSize = function (fontSize) {
if (arguments.length) {
context.font = fontSize + "px Verdana, Geneva, sans-serif";
return this;
}
return context.fontSize;
}
}
这个类也就对Canvas对象进行了简单的封装，设置参数，绘制图形什么的，比较简单，大家可以完善下这个类~
3、GuaGuaLe.js
/** * Created with JetBrains WebStorm. * User: zhy * Date: 14-6-24 * Time: 上午11:36 * To change this template use File | Settings | File Templates. */ function GuaGuaLe(iDFront, idBack) {
this.$eleBack = $("#" + idBack);
this.$eleFront = $("#" + idFront);
this.frontCanvas = new Canvas2D(this.$eleFront);
this.backCanvas = new Canvas2D(this.$eleBack);
this.isStart = false;
}
GuaGuaLe.PRototype = {
constructor: GuaGuaLe, /** * 将用户的传入的参数和默认参数做合并 * @param desAttr * @returns {
{
frontFillColor: string, backFillColor: string, backFontColor: string, backFontSize: number, msg: string}
}
*/ mergeAttr: function (desAttr) {
var defaultAttr = {
frontFillColor: "silver", backFillColor: "gold", backFontColor: "red", backFontSize: 24, msg: "谢谢惠顾" }
;
for (var p in desAttr) {
defaultAttr[p] = desAttr[p];
}
return defaultAttr;
}
, init: function (desAttr) {
var attr = this.mergeAttr(desAttr);
//初始化canvas this.backCanvas.penColor(attr.backFillColor);
this.backCanvas.fontSize(attr.backFontSize);
this.backCanvas.drawRect({
x: 0, y: 0}
, {
x: this.backCanvas.width(), y: this.backCanvas.height()}
, true);
this.backCanvas.penColor(attr.backFontColor);
this.backCanvas.drawTextInCenter(attr.msg, true);
//初始化canvas this.frontCanvas.penColor(attr.frontFillColor);
this.frontCanvas.drawRect({
x: 0, y: 0}
, {
x: this.frontCanvas.width(), y: this.frontCanvas.height()}
, true);
var _this = this;
//设置事件 this.$eleFront.mousedown(function (event) {
_this.mouseDown(event);
}
).mousemove(function (event) {
_this.mouseMove(event);
}
).mouseup(function (event) {
_this.mouseUp(event);
}
);
}
, mouseDown: function (event) {
this.isStart = true;
this.startPoint = this.frontCanvas.getCanvasPoint(event.pageX, event.pageY);
}
, mouseMove: function (event) {
if (!this.isStart)return;
var p = this.frontCanvas.getCanvasPoint(event.pageX, event.pageY);
this.frontCanvas.clearRect(p);
}
, mouseUp: function (event) {
this.isStart = false;
}
}
;
通过用户传入的两个canvas的id，然后生成一个对象，进行初始化操作，设置事件。当然了也提供用户设置可选的参数，各种颜色，已经刮开后显示的信息等，通过
{
frontFillColor: "silver", backFillColor: "gold", backFontColor: "red", backFontSize: 24, msg: "谢谢惠顾" }
;
传给init方法进行设置。
好了，然后就基本完工了，测试一下：
基本实现了刮开图层，但是存在一个小问题，就是当用户滑动特别快时，会出现一些断点，当然也可以忽略，不过我们准备提供一下解决方案：
产生原因：由于鼠标移动速度过快，产生的断点；解决方案：将mousemove中两次的鼠标左边，进行拆分成多个断点坐标：
如上图，把两点之间进行连线，根据斜率，然后分成多个小段，分别获得线段上的坐标（有四种可能，有兴趣可以画画图，计算下，代码如下）：
var k;
if (p.x >
this.startPoint.x) {
k = (p.y - this.startPoint.y) / (p.x - this.startPoint.x);
for (var i = this.startPoint.x;
i p.x;
i += 5) {
this.frontCanvas.clearRect({
x: i, y: (this.startPoint.y + (i - this.startPoint.x) * k)}
);
}
}
else {
k = (p.y - this.startPoint.y) / (p.x - this.startPoint.x);
for (var i = this.startPoint.x;
i >
p.x;
i -= 5) {
this.frontCanvas.clearRect({
x: i, y: (this.startPoint.y + ( i - this.startPoint.x ) * k)}
);
}
}
this.startPoint = p;
4、最后贴一下完整的GuaGuaLe.js
/** * Created with JetBrains WebStorm. * User: zhy * Date: 14-6-24 * Time: 上午11:36 * To change this template use File | Settings | File Templates. */ function GuaGuaLe(idFront, idBack) {
this.$eleBack = $("#" + idBack);
this.$eleFront = $("#" + idFront);
this.frontCanvas = new Canvas2D(this.$eleFront);
this.backCanvas = new Canvas2D(this.$eleBack);
this.isStart = false;
}
GuaGuaLe.prototype = {
constructor: GuaGuaLe, /** * 将用户的传入的参数和默认参数做合并 * @param desAttr * @returns {
{
frontFillColor: string, backFillColor: string, backFontColor: string, backFontSize: number, msg: string}
}
*/ mergeAttr: function (desAttr) {
var defaultAttr = {
frontFillColor: "silver", backFillColor: "gold", backFontColor: "red", backFontSize: 24, msg: "谢谢惠顾" }
;
for (var p in desAttr) {
defaultAttr[p] = desAttr[p];
}
return defaultAttr;
}
, init: function (desAttr) {
var attr = this.mergeAttr(desAttr);
//初始化canvas this.backCanvas.penColor(attr.backFillColor);
this.backCanvas.fontSize(attr.backFontSize);
this.backCanvas.drawRect({
x: 0, y: 0}
, {
x: this.backCanvas.width(), y: this.backCanvas.height()}
, true);
this.backCanvas.penColor(attr.backFontColor);
this.backCanvas.drawTextInCenter(attr.msg, true);
//初始化canvas this.frontCanvas.penColor(attr.frontFillColor);
this.frontCanvas.drawRect({
x: 0, y: 0}
, {
x: this.frontCanvas.width(), y: this.frontCanvas.height()}
, true);
var _this = this;
//设置事件 this.$eleFront.mousedown(function (event) {
_this.mouseDown(event);
}
).mousemove(function (event) {
_this.mouseMove(event);
}
).mouseup(function (event) {
_this.mouseUp(event);
}
);
}
, mouseDown: function (event) {
this.isStart = true;
this.startPoint = this.frontCanvas.getCanvasPoint(event.pageX, event.pageY);
}
, mouseMove: function (event) {
if (!this.isStart)return;
var p = this.frontCanvas.getCanvasPoint(event.pageX, event.pageY);
this.frontCanvas.clearRect(p);
}
, mouseUp: function (event) {
this.isStart = false;
}
}
;
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
使用HTML5 Canvas绘制阴影效果的方法
利用HTML5中的Canvas绘制笑脸的代码
HTML5和CSS3实现3D展示商品信息的代码
以上就是canvas 模拟实现电子彩票刮刮乐的代码的详细内容，更多请关注其它相关文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： canvas 模拟实现电子彩票刮刮乐的代码
本文地址： https://pptw.com/jishu/584276.html