HTML5+CSS3實(shí)例 ：canvas 模擬實(shí)現(xiàn)電子彩票刮刮樂代碼
發(fā)布時(shí)間：2016-12-30 17:03:08 作者：鴻洋_ 
我要評論
我要評論今天給大家?guī)硪粋€(gè)刮刮樂的小例子~基于HTML5 canvas的,非常具有使用價(jià)值，有興趣的可以了解一下。
今天給大家?guī)硪粋€(gè)刮刮樂的小例子~基于HTML5 canvas的，有興趣的可以改成Android版本的，或者其他的~
效果圖：
貼一張我中500w的照片，咋辦啊，怎么花呢~
好了，下面開始原理：
1、刮獎區(qū)域兩個(gè)Canvas，一個(gè)是front ， 一個(gè)back ，front遮蓋住下面的canvas。
2、canvas默認(rèn)填充了一個(gè)矩形，將下面canvas效果圖遮蓋，然后監(jiān)聽mouse事件，根據(jù)mousemove的x,y坐標(biāo)，進(jìn)行擦出front canvas上的矩形區(qū)域，然后顯示出下面的canvas的效果圖。
很簡單把~嘿嘿~
1、HTML文件內(nèi)容：
<!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>
<div class="container">
<canvas id="back" width="200" height="80"></canvas>
<canvas id="front" width="200" height="80"></canvas>
</div>
</body>
</html>
2、首先我利用了一個(gè)以前寫的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);
}
};
/**
* 根據(jù)書寫的文本，得到該文本在canvas上書寫的中心位置的左上角坐標(biāo)
* @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();
}
/**
* 當(dāng)屏幕大小發(fā)生變化，重新計(jì)算offset
*/
$(window).resize(function ()
{
pageOffset = $canvas.offset();
});
/**
* 將頁面上的左邊轉(zhuǎn)化為canvas中的坐標(biāo)
* @param pageX
* @param pageY
* @returns {{x: number, y: number}}
*/
this.getCanvasPoint = function (pageX, pageY)
{
return{
x: pageX - pageOffset.left,
y: pageY - pageOffset.top
}
}
/**
* 清除區(qū)域，此用戶鼠標(biāo)擦出刮獎涂層
* @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);
}
};
/**
* 設(shè)置畫筆寬度
* @param newWidth
* @returns {*}
*/
this.penWidth = function (newWidth)
{
if (arguments.length)
{
context.lineWidth = newWidth;
return this;
}
return context.lineWidth;
};
/**
* 設(shè)置畫筆顏色
* @param newColor
* @returns {*}
*/
this.penColor = function (newColor)
{
if (arguments.length)
{
context.strokeStyle = newColor;
context.fillStyle = newColor;
return this;
}
return context.strokeStyle;
};
/**
* 設(shè)置字體大小
* @param fontSize
* @returns {*}
*/
this.fontSize = function (fontSize)
{
if (arguments.length)
{
context.font = fontSize + "px Verdana, Geneva, sans-serif";
return this;
}
return context.fontSize;
}
}
這個(gè)類也就對Canvas對象進(jìn)行了簡單的封裝，設(shè)置參數(shù)，繪制圖形什么的，比較簡單，大家可以完善下這個(gè)類~
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,
/**
* 將用戶的傳入的參數(shù)和默認(rèn)參數(shù)做合并
* @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;
//設(shè)置事件
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;
}
};
通過用戶傳入的兩個(gè)canvas的id，然后生成一個(gè)對象，進(jìn)行初始化操作，設(shè)置事件。當(dāng)然了也提供用戶設(shè)置可選的參數(shù)，各種顏色，已經(jīng)刮開后顯示的信息等，通過
{
frontFillColor: "silver",
backFillColor: "gold",
backFontColor: "red",
backFontSize: 24,
msg: "謝謝惠顧"
};
傳給init方法進(jìn)行設(shè)置。
好了，然后就基本完工了，測試一下：
基本實(shí)現(xiàn)了刮開圖層，但是存在一個(gè)小問題，就是當(dāng)用戶滑動特別快時(shí)，會出現(xiàn)一些斷點(diǎn)，當(dāng)然也可以忽略，不過我們準(zhǔn)備提供一下解決方案：
產(chǎn)生原因：由于鼠標(biāo)移動速度過快，產(chǎn)生的斷點(diǎn)；解決方案：將mousemove中兩次的鼠標(biāo)左邊，進(jìn)行拆分成多個(gè)斷點(diǎn)坐標(biāo)：
如上圖，把兩點(diǎn)之間進(jìn)行連線，根據(jù)斜率，然后分成多個(gè)小段，分別獲得線段上的坐標(biāo)（有四種可能，有興趣可以畫畫圖，計(jì)算下，代碼如下）：
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,
/**
* 將用戶的傳入的參數(shù)和默認(rèn)參數(shù)做合并
* @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;
//設(shè)置事件
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;
}
};
源碼點(diǎn)擊下載：demo
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
html5 canvas實(shí)現(xiàn)的可用于手機(jī)端手指滑動刮刮樂效果源碼
這是一款基于html5 canvas實(shí)現(xiàn)的可用于手機(jī)端手指滑動刮刮樂效果源碼。通過按下鼠標(biāo)左鍵并拖動即可實(shí)現(xiàn)刮刮卡效果的刮去表面遮罩層，同時(shí)顯示底部女神圖片的功能。該源碼還2016-07-20
Html5 Canvas 實(shí)現(xiàn)一個(gè)“刮刮樂”游戲
這篇文章主要介紹了Html5 Canvas 實(shí)現(xiàn)一個(gè)“刮刮樂”游戲,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-05
