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

HTML5頁面的作用

公司主營業(yè)務(wù)：網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出宜興免費(fèi)做網(wǎng)站回饋大家。

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

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

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

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

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

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

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

html5畫布常用嗎

html5 Canvas在實(shí)現(xiàn)動畫上性能會比DOM操作好，就是占用內(nèi)存會比較多一點(diǎn)。html Canvas目前用的頻率還算是比較高，特別是在html5游戲、html5 3d效果、html5動畫等會用的會比較多。

html5 Canvas場景舉例：

HTML5 彈幕功能

HTML5 刮刮卡功能

HTML5 游戲開發(fā)

HTML5 動畫效果

備注：canvas提供的功能更原始，適合像素處理，動態(tài)渲染和大數(shù)據(jù)量繪制。

參考資料：

《canvas 系列教程》

html5 canvas 刮刮卡問題

!DOCTYPE?html

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已刮開?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

親，看看這個對你有幫助么

本文標(biāo)題：html5刮刮卡,h5刮刮卡效果
URL鏈接：http://m.rwnh.cn/article8/dscoeop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、定制開發(fā)、商城網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、Google、企業(yè)網(wǎng)站制作

廣告

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