H5 Canvas刮刮卡效果实例

前端开发要求会什么软件 前端开发需要什么软件 前端开发用的什么工具
// 1、效果
// 2、原理
// 3、实现**
// (1)定义Lottery类*
function Lottery(id, cover, coverType, width, height, drawPercentCallback) {
this.conId = id;
this.conNode = document.getElementById(this.conId);
this.cover = cover || ‘#CCC’;
this.coverType = coverType || ‘color’;
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;
}
// id:刮奖容器的id
// cover:涂层内容,可以为图片地址或颜色值,可空,默认为 #ccc
// coverType:涂层类型,值为 image 或 color,可空,默认为 color
// width:刮奖区域宽度,默认为300px,可空
// height:刮奖区域高度,默认为100px,可空
// drawPercentCallback:刮开的区域百分比回调,可空
// background:第一个canvas元素
// backCtx:background元素的2d上下文(context)
// mask:第二个canvas元素
// maskCtx:mask元素的2d上下文(context)
// lottery:刮开后显示的内容,可以为图片地址或字符串
// lotteryType:刮开后显示的内容类型,值为 image 或 text,要跟lottery匹配
// clientRect:用于记录mask元素的 getBoundingClientRect() 值
// (2)添加二个canvas到刮奖容器,并获取2d上下文
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(/[wW]| /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’);
// (3)绘制第一个canvas
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);
}
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();
}
// (4)绘制第二个canvas第二个canvas也分 image 或 color 填充两种情况。这里有一个难点,就是如何把鼠标点击区域变成透明的呢?答案在这里:https://developer.mozilla.org/en/docs/web/Guide/html/Canvas_tutorial/Compositing即我们要把 maskCtx的 globalCompositeOperation 设置为 destination-out ,详细的用法请参考上面给出的链接。因此,绘制第二个canvas的代码如下:
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;
}//这里resizeCanvas是改变canvas大小的工具方法。
// (5)绑定事件绘制完成后,要给第二个canvas绑定事件。这里分了移动设备和PC-web两处情况。移动设备是 touchstart 和 touchmove 事件,对应的PC-web是keydown 和 mousemove事件,另外PC-web方式下,要给document绑定一个mouseup事件,用来判断鼠标是否按下。代码如下:
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);
}
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) {
returnfalse;
}
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);
}这里在事件中取出了鼠标坐标,调用了drawPoint进行了绘制,下面会讲到。
(6)绘制点击和涂抹区域这里用到了canvas的径向渐变,在鼠标从标处绘制一个圆形,代码如下: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)); }}
(7)涂抹区域百分比
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);
}
8)调用入口init
init: function (lottery, lotteryType) {
this.lottery = lottery;
this.lotteryType = lotteryType || ‘image’;
this.drawLottery();
}
(9)完整代码
https://github.com/artwl/Lottery
开发前端包括什么 前端开发需要什么样的笔记本 移动前端开发指什么
» 本文来自:前端开发者 » 《H5 Canvas刮刮卡效果实例》
» 本文链接地址:https://www.rokub.com/5602.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!