您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)html5中canvas模擬實(shí)現(xiàn)電子彩票刮刮樂(lè)的案例,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
效果圖:
貼一張我中500w的照片,咋辦啊,怎么花呢~
好了,下面開(kāi)始原理:
1、刮獎(jiǎng)區(qū)域兩個(gè)Canvas,一個(gè)是front , 一個(gè)back ,front遮蓋住下面的canvas。
2、canvas默認(rèn)填充了一個(gè)矩形,將下面canvas效果圖遮蓋,然后監(jiān)聽(tīng)mouse事件,根據(jù)mousemove的x,y坐標(biāo),進(jìn)行擦出front canvas上的矩形區(qū)域,然后顯示出下面的canvas的效果圖。
很簡(jiǎn)單把~嘿嘿~
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> <p class="container"> <canvas id="back" width="200" height="80"></canvas> <canvas id="front" width="200" height="80"></canvas> </p> </body> </html>
2、首先我利用了一個(gè)以前寫(xiě)的canvas輔助類,留下來(lái)今天要用的一些方法:
/** * 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ù)書(shū)寫(xiě)的文本,得到該文本在canvas上書(shū)寫(xiě)的中心位置的左上角坐標(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(); }); /** * 將頁(yè)面上的左邊轉(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)擦出刮獎(jiǎng)涂層 * @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è)置畫(huà)筆寬度 * @param newWidth * @returns {*} */ this.penWidth = function (newWidth) { if (arguments.length) { context.lineWidth = newWidth; return this; } return context.lineWidth; }; /** * 設(shè)置畫(huà)筆顏色 * @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è)類也就對(duì)Canvas對(duì)象進(jìn)行了簡(jiǎn)單的封裝,設(shè)置參數(shù),繪制圖形什么的,比較簡(jiǎn)單,大家可以完善下這個(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; } };
通過(guò)用戶傳入的兩個(gè)canvas的id,然后生成一個(gè)對(duì)象,進(jìn)行初始化操作,設(shè)置事件。當(dāng)然了也提供用戶設(shè)置可選的參數(shù),各種顏色,已經(jīng)刮開(kāi)后顯示的信息等,通過(guò)
{ frontFillColor: "silver", backFillColor: "gold", backFontColor: "red", backFontSize: 24, msg: "謝謝惠顧" };
傳給init方法進(jìn)行設(shè)置。
好了,然后就基本完工了,測(cè)試一下:
基本實(shí)現(xiàn)了刮開(kāi)圖層,但是存在一個(gè)小問(wèn)題,就是當(dāng)用戶滑動(dòng)特別快時(shí),會(huì)出現(xiàn)一些斷點(diǎn),當(dāng)然也可以忽略,不過(guò)我們準(zhǔn)備提供一下解決方案:
產(chǎn)生原因:由于鼠標(biāo)移動(dòng)速度過(guò)快,產(chǎn)生的斷點(diǎn);解決方案:將mousemove中兩次的鼠標(biāo)左邊,進(jìn)行拆分成多個(gè)斷點(diǎn)坐標(biāo):
如上圖,把兩點(diǎn)之間進(jìn)行連線,根據(jù)斜率,然后分成多個(gè)小段,分別獲得線段上的坐標(biāo)(有四種可能,有興趣可以畫(huà)畫(huà)圖,計(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; } };
關(guān)于html5中canvas模擬實(shí)現(xiàn)電子彩票刮刮樂(lè)的案例就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。