html5 canvas 刮刮卡問(wèn)題

!DOCTYPE?html

為北京等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及北京網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、北京網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

html

head

meta?http-equiv="content-type"?content="text/html;?charset=UTF-8"

title?-?jsFiddle?demo?by?artwl/title

script?type='text/javascript'?src='/js/lib/dummy.js'/script

link?rel="stylesheet"?type="text/css"?href="/css/result-light.css"

style?type='text/css'

body{

height:1000px;

}

#lotteryContainer?{

position:relative;

width:?300px;

height:100px;

}

#drawPercent?{

color:#F60;

}

/style

/head

body

button?id="freshBtn"刷新/buttonlabel已刮開(kāi)?span?id="drawPercent"0%/span?區(qū)域。/label

div?id="lotteryContainer"/div

script?type='text/javascript'//![CDATA[?

function?Lottery(id,?cover,?coverType,?width,?height,?drawPercentCallback)?{

this.conId?=?id;

this.conNode?=?document.getElementById(this.conId);

this.cover?=?cover;

this.coverType?=?coverType;

this.background?=?null;

this.backCtx?=?null;

this.mask?=?null;

this.maskCtx?=?null;

this.lottery?=?null;

this.lotteryType?=?'image';

this.width?=?width?||?300;

this.height?=?height?||?100;

this.clientRect?=?null;

this.drawPercentCallback?=?drawPercentCallback;

}

Lottery.prototype?=?{

createElement:?function?(tagName,?attributes)?{

var?ele?=?document.createElement(tagName);

for?(var?key?in?attributes)?{

ele.setAttribute(key,?attributes[key]);

}

return?ele;

},

getTransparentPercent:?function(ctx,?width,?height)?{

var?imgData?=?ctx.getImageData(0,?0,?width,?height),

pixles?=?imgData.data,

transPixs?=?[];

for?(var?i?=?0,?j?=?pixles.length;?i??j;?i?+=?4)?{

var?a?=?pixles[i?+?3];

if?(a??128)?{

transPixs.push(i);

}

}

return?(transPixs.length?/?(pixles.length?/?4)?*?100).toFixed(2);

},

resizeCanvas:?function?(canvas,?width,?height)?{

canvas.width?=?width;

canvas.height?=?height;

canvas.getContext('2d').clearRect(0,?0,?width,?height);

},

drawPoint:?function?(x,?y)?{

this.maskCtx.beginPath();

var?radgrad?=?this.maskCtx.createRadialGradient(x,?y,?0,?x,?y,?30);

radgrad.addColorStop(0,?'rgba(0,0,0,0.6)');

radgrad.addColorStop(1,?'rgba(255,?255,?255,?0)');

this.maskCtx.fillStyle?=?radgrad;

this.maskCtx.arc(x,?y,?30,?0,?Math.PI?*?2,?true);

this.maskCtx.fill();

if?(this.drawPercentCallback)?{

this.drawPercentCallback.call(null,?this.getTransparentPercent(this.maskCtx,?this.width,?this.height));

}

},

bindEvent:?function?()?{

var?_this?=?this;

var?device?=?(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera?mini/i.test(navigator.userAgent.toLowerCase()));

var?clickEvtName?=?device???'touchstart'?:?'mousedown';

var?moveEvtName?=?device??'touchmove':?'mousemove';

if?(!device)?{

var?isMouseDown?=?false;

document.addEventListener('mouseup',?function(e)?{

isMouseDown?=?false;

},?false);

}?else?{

document.addEventListener("touchmove",?function(e)?{

if?(isMouseDown)?{

e.preventDefault();

}

},?false);

document.addEventListener('touchend',?function(e)?{

isMouseDown?=?false;

},?false);

}

this.mask.addEventListener(clickEvtName,?function?(e)?{

isMouseDown?=?true;

var?docEle?=?document.documentElement;

if?(!_this.clientRect)?{

_this.clientRect?=?{

left:?0,

top:0

};

}

var?x?=?(device???e.touches[0].clientX?:?e.clientX)?-?_this.clientRect.left?+?docEle.scrollLeft?-?docEle.clientLeft;

var?y?=?(device???e.touches[0].clientY?:?e.clientY)?-?_this.clientRect.top?+?docEle.scrollTop?-?docEle.clientTop;

_this.drawPoint(x,?y);

},?false);

this.mask.addEventListener(moveEvtName,?function?(e)?{

if?(!device??!isMouseDown)?{

return?false;

}

var?docEle?=?document.documentElement;

if?(!_this.clientRect)?{

_this.clientRect?=?{

left:?0,

top:0

};

}

var?x?=?(device???e.touches[0].clientX?:?e.clientX)?-?_this.clientRect.left?+?docEle.scrollLeft?-?docEle.clientLeft;

var?y?=?(device???e.touches[0].clientY?:?e.clientY)?-?_this.clientRect.top?+?docEle.scrollTop?-?docEle.clientTop;

_this.drawPoint(x,?y);

},?false);

},

drawLottery:?function?()?{

this.background?=?this.background?||?this.createElement('canvas',?{

style:?'position:absolute;left:0;top:0;'

});

this.mask?=?this.mask?||?this.createElement('canvas',?{

style:?'position:absolute;left:0;top:0;'

});

if?(!this.conNode.innerHTML.replace(/[\w\W]|?/g,?''))?{

this.conNode.appendChild(this.background);

this.conNode.appendChild(this.mask);

this.clientRect?=?this.conNode???this.conNode.getBoundingClientRect()?:?null;

this.bindEvent();

}

this.backCtx?=?this.backCtx?||?this.background.getContext('2d');

this.maskCtx?=?this.maskCtx?||?this.mask.getContext('2d');

if?(this.lotteryType?==?'image')?{

var?image?=?new?Image(),

_this?=?this;

image.onload?=?function?()?{

_this.width?=?this.width;

_this.height?=?this.height;

_this.resizeCanvas(_this.background,?this.width,?this.height);

_this.backCtx.drawImage(this,?0,?0);

_this.drawMask();

}

image.src?=?this.lottery;

}?else?if?(this.lotteryType?==?'text')?{

this.width?=?this.width;

this.height?=?this.height;

this.resizeCanvas(this.background,?this.width,?this.height);

this.backCtx.save();

this.backCtx.fillStyle?=?'#FFF';

this.backCtx.fillRect(0,?0,?this.width,?this.height);

this.backCtx.restore();

this.backCtx.save();

var?fontSize?=?30;

this.backCtx.font?=?'Bold?'?+?fontSize?+?'px?Arial';

this.backCtx.textAlign?=?'center';

this.backCtx.fillStyle?=?'#F60';

this.backCtx.fillText(this.lottery,?this.width?/?2,?this.height?/?2?+?fontSize?/?2);

this.backCtx.restore();

this.drawMask();

}

},

drawMask:?function()?{

this.resizeCanvas(this.mask,?this.width,?this.height);

if?(this.coverType?==?'color')?{

this.maskCtx.fillStyle?=?this.cover;

this.maskCtx.fillRect(0,?0,?this.width,?this.height);

this.maskCtx.globalCompositeOperation?=?'destination-out';

}?else?if?(this.coverType?==?'image'){

var?image?=?new?Image(),

_this?=?this;

image.onload?=?function?()?{

_this.maskCtx.drawImage(this,?0,?0);

_this.maskCtx.globalCompositeOperation?=?'destination-out';

}

image.src?=?this.cover;

}

},

init:?function?(lottery,?lotteryType)?{

this.lottery?=?lottery;

this.lotteryType?=?lotteryType?||?'image';

this.drawLottery();

}

}

window.onload?=?function?()?{

var?lottery?=?new?Lottery('lotteryContainer',?'#CCC',?'color',?300,?100,?drawPercent);

lottery.init('',?'image');

document.getElementById('freshBtn').onclick?=?function()?{

drawPercentNode.innerHTML?=?'0%';

lottery.init(getRandomStr(10),?'text');

}

var?drawPercentNode?=?document.getElementById('drawPercent');

function?drawPercent(percent)?{

drawPercentNode.innerHTML?=?percent?+?'%';

}

}

function?getRandomStr(len)?{

var?text?=?"";

var?possible?=?"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

for(?var?i=0;?i??len;?i++?)

text?+=?possible.charAt(Math.floor(Math.random()?*?possible.length));

return?text;

}

//]]??

/script

/body

/html

親，看看這個(gè)對(duì)你有幫助么

HTML5頁(yè)面的作用及應(yīng)用場(chǎng)景有哪些

HTML5頁(yè)面的作用

1、令企業(yè)發(fā)展更開(kāi)闊：HTML5頁(yè)面作為新興的微信推廣工具，可以應(yīng)用各種各樣的場(chǎng)景，比如產(chǎn)品展示、購(gòu)買(mǎi)流程，購(gòu)物車(chē)等，能讓客戶有更快的速度體驗(yàn)，不再卡頓。

2、令體驗(yàn)更完美：HTML5頁(yè)面中的各種炫酷創(chuàng)新的場(chǎng)景模擬、動(dòng)畫(huà)效果、互動(dòng)方式，都能給用戶帶來(lái)新鮮獨(dú)特的完美體驗(yàn)，這是傳統(tǒng)手機(jī)頁(yè)面所不能媲美的。

HTML5頁(yè)面可以運(yùn)用到哪些應(yīng)用場(chǎng)景

1、企業(yè)宣傳：高大上的游戲能幫助企業(yè)快速聚集人氣，讓你的客戶訂單從游戲開(kāi)始。

2、企業(yè)招聘：令企業(yè)走向人才，令人才近距離了解企業(yè)、認(rèn)識(shí)企業(yè)，令招聘更高效。

3、商業(yè)營(yíng)銷(xiāo)：通過(guò)HTML5特性，使用大轉(zhuǎn)盤(pán)，刮刮卡，滿減滿增等增加客戶粘性，從而達(dá)到營(yíng)銷(xiāo)目的。

4、報(bào)名預(yù)約：旅游線路報(bào)名、教育課程報(bào)名、餐廳預(yù)約等場(chǎng)合都可以，多種表單預(yù)設(shè)，也可以自己創(chuàng)建新的預(yù)約流程，自由選擇。

網(wǎng)上html5刮刮獎(jiǎng)的例子為什么在某些支持HTML5的手機(jī)掛不開(kāi)呢？

Canvas 是 HTML5 的新功能，雖然很多瀏覽器號(hào)稱(chēng)支持 HTML5 ，但大多支持度都不夠

且有些的 HTML5 解析是自行定義的，所以也會(huì)有偏差

不懂可以私信問(wèn)我詳細(xì)

html5怎么在刮獎(jiǎng)上面加水印

我的想法是在上面加一個(gè)DIV絕對(duì)定位，DIV里面是一堆寬和高都為1個(gè)像素的，鼠標(biāo)移到小的像素的DIV上時(shí)，讓他的背景和透明度不見(jiàn)，這樣下面刮獎(jiǎng)的內(nèi)容就可以顯示出來(lái)了，因?yàn)镈IV又小又多，所以可能需要來(lái)回移動(dòng)鼠標(biāo)，模擬刮獎(jiǎng)的過(guò)程

手機(jī)邀請(qǐng)函怎么制作？

你說(shuō)的的應(yīng)該是基于html5技術(shù)的手機(jī)邀請(qǐng)函，你說(shuō)的那種刮一刮效果其實(shí)就是html5的擦一擦效果，這個(gè)在html5頁(yè)面是很常見(jiàn)的效果。如果你會(huì)html5代碼，可以直接編程制作，或者聯(lián)系第三方來(lái)進(jìn)行開(kāi)發(fā)。

如果你不會(huì)代碼，但是又有這方面的需要，可以通過(guò)maka.im之類(lèi)的html5制作平臺(tái)，制作起來(lái)比較簡(jiǎn)單，通過(guò)模板組合，添加圖文的方式來(lái)生成，完成之后就能在手機(jī)觀看和分享。當(dāng)然可自定義的地方不多，畢竟是以模板為主，關(guān)鍵是免費(fèi)。

如果覺(jué)得還不錯(cuò)，還望采納~

文章題目：html5刮,html刮刮樂(lè)效果
當(dāng)前地址：http://www.yijiale78.com/article26/dschecg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、靜態(tài)網(wǎng)站、Google、網(wǎng)站策劃、定制開(kāi)發(fā)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)