Atitit .html5刮刮卡的gui实现总结

#----两个案例canvas或者wScratchPad-1.4.4 1

#----1.添加panel ,这个十mask div.....postion:absoluti..高度宽度都是100% 1

#---2.初始化wScratchPad 1

#-----判断抽奖机会已经用完and 遮罩挠完33%走自动清空mask.. 2

#-----设置mask图片加载后的事件(初始化悬浮图片top位置>>ajax开始>>加载bingo/nobigon的div) 3

#---wScratchPad.js的几个bug调整(ctx.drawImage马完全的mask图片,添加图片加载在后回调函数) 3

#------刮的的时候儿点点点的问题解决 4

#----两个案例canvas或者wScratchPad-1.4.4

canvas自己实现麻烦的...韩式使用库jq 插件wScratchPad实现容易的...

作者老哇的爪子 Attilax 艾龙， EMAIL:1466519819@qq.com

转载请注明来源： http://blog.csdn.net/attilax

#----1.添加panel ,这个十mask div.....postion:absoluti..高度宽度都是100%

#---2.初始化wScratchPad

(function (bodyStyle) {

bodyStyle.mozUserSelect = 'none';

bodyStyle.webkitUserSelect = 'none';

$("#wScratchPad").wScratchPad({

width : skrtAreaO5.width(),

height : skrtAreaO5.height(),

image : null,

image2 : "../images/crchcard.png",

size:20,

scratchDown : function (e, percent) {

console.log(percent);

ReadyclearO5(percent);

scratchMove : function (e, percent) {

console.log(percent);

ReadyclearO5(percent);

scratchUp : function (e, percent) {

console.log(percent);

ReadyclearO5(percent);

}

});

logx("-- add conver img ok");

})(document.body.style);

#-----判断抽奖机会已经用完and 遮罩挠完33%走自动清空mask..

function ReadyclearO5(percent) {

if ($("#awardChoiceNum").val() == 0) {

alert("抽奖机会已经用完");

return;

}

if (percent > 35)

$('#divCrchcard').hide();

}

#-----设置mask图片加载后的事件(初始化悬浮图片top位置>>ajax开始>>加载bingo/nobigon的div)

var skrtAreaO5 = $('#mainmainx');

var skrchImgLoadAfterEvent = function () {

$('#nobingoDiv').show();

iniAwardChoiceNum();

testShowBingoDiv();

iniBonusPicPositionNhit();

};

#---wScratchPad.js的几个bug调整(ctx.drawImage马完全的mask图片,添加图片加载在后回调函数)

drawImage: function(imagePath)

{

var $this = this;

var img = new Image();

img.src = imagePath;

$(img).load(function(){

//o59 attilax

//$this.ctx.drawImage(img, 0, 0

$this.ctx.drawImage(img, 0, 0,img.width,img.height,0,0,skrtAreaO5.width(),skrtAreaO5.height());

$this.setBgImage();

//ati add afgterEvent()

skrchImgLoadAfterEvent();

})

#------刮的的时候儿点点点的问题解决

原因:使用了点的原理来清空area....

可以添加点的size到30....或者使用line来清空area....

Atitit .html5刮刮卡的gui实现总结相关推荐

刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
html制作花样链接卡页面_使用HTML5实现刮刮卡效果
我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮 ...
刮刮乐html5效果擦除,HTML5实现刮刮卡的效果
HTML5实现类似刮刮卡的功能上面是最终实现刮刮卡效果注意要点设置: 1.设置用户缩放:user-scalable=no|yes [java] view plaincopyprint? 2.禁止拖 ...
HTML用画布实现刮刮卡,利用HTML5的画布Canvas实现刮刮卡效果_javascript技巧
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
手机html5卡,手机端js和html5刮刮卡效果
H5的Canvas实现刮刮卡效果. 刮开之后是随机生成的8位码. IE8不行... HTML5 刮刮卡 .demo{width:320px; margin:10px auto 20px auto; m ...
HTML5实现类似刮刮卡的功能
HTML5实现类似刮刮卡的功能有这样一个功能,当我们使用微信公众号,发送图片时......此处省略300字! 注意要点设置: 1.设置用户缩放:user-scalable=no|yes <me ...
html刮刮卡开始刮奖页面,使用HTML5实现刮刮卡效果
你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...
手机特效html,支持移动手机的HTML5 Canvas刮刮卡特效
这是一款支持移动手机的HTML5 Canvas刮刮卡特效.该刮刮卡特效通过Canvas来前后两张图片的刮卡效果,支持桌面端和移动端. 使用方法 HTML结构使用元素来制作刮卡. ...... CS ...
html5 canvas制作刮刮卡
下班后,闲着无事,刚好近期在学习画布相关知识,就写了个刮刮卡的demo练一下手,兼容安卓.IOS哦.高手路过,多多指点! 刮刮卡实现原理: 通过canvas绘制一个图片,用户手指触发屏幕时,刮开当前一 ...
html刮刮卡开始刮奖页面,Html5实现移动端、PC端刮刮卡效果
先给大家展示下效果图: 刮刮卡需求: 每一位用户有三次刮刮卡的机会本次刮刮卡的结果会覆盖上次的结果刮刮卡的中奖几率呈现为递增的曲线(保证三次中必须有一次中奖) 刮出的结果包含按钮既(领取奖品 or ...

Atitit .html5刮刮卡的gui实现总结

#----两个案例canvas或者wScratchPad-1.4.4

#----1.添加panel ,这个十mask div.....postion:absoluti..高度宽度都是100%

#---2.初始化wScratchPad

#-----判断抽奖机会已经用完and 遮罩挠完33%走自动清空mask..

#-----设置mask图片加载后的事件(初始化悬浮图片top位置>>ajax开始>>加载bingo/nobigon的div)

#---wScratchPad.js的几个bug调整(ctx.drawImage马完全的mask图片,添加图片加载在后回调函数)

#------刮的的时候儿点点点的问题解决

Atitit .html5刮刮卡的gui实现总结相关推荐

最新文章

热门文章