html5刮,html刮刮乐效果
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 区域。/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
亲，看看这个对你有帮助么
HTML5页面的作用及应用场景有哪些
HTML5页面的作用
1、令企业发展更开阔：HTML5页面作为新兴的微信推广工具，可以应用各种各样的场景，比如产品展示、购买流程，购物车等，能让客户有更快的速度体验，不再卡顿。
2、令体验更完美：HTML5页面中的各种炫酷创新的场景模拟、动画效果、互动方式，都能给用户带来新鲜独特的完美体验，这是传统手机页面所不能媲美的。
HTML5页面可以运用到哪些应用场景
1、企业宣传：高大上的游戏能帮助企业快速聚集人气，让你的客户订单从游戏开始。
2、企业招聘：令企业走向人才，令人才近距离了解企业、认识企业，令招聘更高效。
3、商业营销：通过HTML5特性，使用大转盘，刮刮卡，满减满增等增加客户粘性，从而达到营销目的。
4、报名预约：旅游线路报名、教育课程报名、餐厅预约等场合都可以，多种表单预设，也可以自己创建新的预约流程，自由选择。
网上html5刮刮奖的例子为什么在某些支持HTML5的手机挂不开呢？
Canvas 是 HTML5 的新功能，虽然很多浏览器号称支持 HTML5 ，但大多支持度都不够
且有些的 HTML5 解析是自行定义的，所以也会有偏差
不懂可以私信问我详细
html5怎么在刮奖上面加水印
我的想法是在上面加一个DIV绝对定位，DIV里面是一堆宽和高都为1个像素的，鼠标移到小的像素的DIV上时，让他的背景和透明度不见，这样下面刮奖的内容就可以显示出来了，因为DIV又小又多，所以可能需要来回移动鼠标，模拟刮奖的过程
手机邀请函怎么制作？
你说的的应该是基于html5技术的手机邀请函，你说的那种刮一刮效果其实就是html5的擦一擦效果，这个在html5页面是很常见的效果。如果你会html5代码，可以直接编程制作，或者联系第三方来进行开发。
如果你不会代码，但是又有这方面的需要，可以通过maka.im之类的html5制作平台，制作起来比较简单，通过模板组合，添加图文的方式来生成，完成之后就能在手机观看和分享。当然可自定义的地方不多，毕竟是以模板为主，关键是免费。
如果觉得还不错，还望采纳~
当前名称：html5刮,html刮刮乐效果
路径分享：http://myzitong.com/article/dschecg.html