方法／步骤
1、一枚硬币。通常最常用的方法是用硬币刮一下，最好是一元硬币，五角形和一角硬币的硬币都有点小，使用起来不是很方便。不要用指甲抓。看起来很硬但太薄的东西不会轻易脱落。就我个人而言，我觉得很不舒服。
2、用砂纸打磨它。有些刮花卡的涂布质量可能不是很好，有时用硬币刮下来，用力太猛反而会造成损坏，我们可以试着用砂纸打磨，先轻轻打磨，主要是防止下面的字或数字被刮掉。看文字或数字之前的适当强度。
3、使用钝刀。或者用钝的一边的刀，锋利的一边很容易刮掉文字或图形，造成不必要的损失。用钝面轻轻刮擦涂层应该是有效的。
4、在其他情况下。有些刮刮卡如果涂层湿了会很难刮掉，你可以想办法把刮刮卡弄干，就是放在干燥的地方晾干空气或者用吹风机吹干，然后用上面的方法进行刮刮。
5、刮划卡的涂层材料不好，有些涂层油墨或其他材料都不好，时间长了刮会很难刮，没有特别的办法，我们最好少买试一下，效果好就多买，不要再买了。
6、购买的笔记。试着从老板那里购买新的刮刮卡，而不是旧的刮刮卡。同时要小心一些刮花卡如果是假的，自然涂层也刮开，所以尽量去正规的销售商店购买。
7、与商家联系。有的刮刮卡是举办单位办的活动，假如刮刮不下来，可以找相关负责人和商家联系，看看是否能调换或给予一定补偿。
ppt刮刮卡刮完就代表此ppt刮刮卡已用完，失去了效果，就会消失。刮刮卡是指卡上的一种覆盖数字和字母密码等文字的涂层，因此刮刮卡也叫密码覆膜卡、帐户卡或记账密码卡。刮刮卡的品种很多，在市场上广泛使用的有有奖刮刮卡引、剥剥卡、充值卡、密码卡、消费券、积分卡等等。<!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">刷新</button><label>已刮开 <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:absoluteleft:0top:0'
})
this.mask = this.mask || this.createElement('canvas', {
style: 'position:absoluteleft:0top: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('http://www.baidu.com/img/bdlogo.gif', '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>
亲，看看这个对你有帮助么
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）