HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐.docx

今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的，有兴趣的可以改成android版本的，或者其他的~效果图：贴一张我中500w的照片，咋办啊，怎么花呢~好了，下面开始原理：1、刮奖区域两个Canvas，一个是front ， 一个back ，front遮盖住下面的canvas。2、canvas默认填充了一个矩形，将下面canvas效果图遮盖，然后监听mouse事件，根据mousemove的x,y坐标，进行擦出front canvas上的矩形区域，然后显示出下面的canvas的效果图。很简单把~嘿嘿~1、HTML文件内容：[html]?view plain?copy?!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、首先我利用了一个以前写的canvas辅助类，留下来今天要用的一些方法：[javascript]?view plain?copy?/**??*?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,?