html刮奖特效,用CANVAS模拟一个简单的刮奖效果

用CANVAS模拟一个简单的刮奖效果.html>

* {

padding: 0;

margin: 0;

}

.box {

position: relative;

height: 400px;

width: 400px;

margin-left: 20px;

}

.info {

position: absolute;

top: 50%;

left: 50%;

transform: translate3d(-50%, -50%, 0);

-webkit-transform: translate3d(-50%, -50%, 0);

}

.btn {

font-size: 30px;

color: #000;

cursor: pointer;

}

.btn a {

color: #399;

text-decoration: none;

}

.canvas {

position: absolute;

top: 50%;

left: 50%;

margin-left: -200px;

margin-top: -200px;

z-index: 2;

}

.number {

display: inline-block;

border: 1px solid #225555;

border-radius: 2px;

font-size: 16px;

margin: 10px 0 10px 50px;

width: 60px;

line-height: 30px;

height: 30px;

text-align: center;

color: #399;

}

.mask {

height: 100%;

width: 100%;

background: rgba(155, 155, 155, 1);

top: 0;

left: 0;

z-index: 44;

position: absolute;

}

.agin{

border-radius: 4px;

text-shadow: 1px 1px 1px #fff;

box-shadow: 1px 1px 1px rgba(0, 0, 0, .3);

text-align:center;

background:#ccc;

border:1ps solid #399;

margin-top:20px;

}

.mask a {

display: block;

width: 80px;

height: 40px;

line-height: 40px;

font-size: 24px;

background: #ccc;

color: #000;

text-decoration: none;

text-align: center;

position: absolute;

top: 50%;

left: 50%;

transform: translate3d(-50%, -50%, 0);

-webkit-transform: translate3d(-50%, -50%, 0);

border-radius: 4px;

text-shadow: 1px 1px 1px #fff;

box-shadow: 1px 1px 1px rgba(0, 0, 0, .3);

}

200

厉害了我的哥

再来一次

开始

function Card(obj) {

if(!obj) return;

this.obj = obj;

this.w = obj.width;

this.h = obj.height;

this.ctx = obj.getContext('2d');

this.prize = obj.previousElementSibling;

this.aginBtn = this.prize.querySelector('#agin');

this.number = document.querySelector('.number');

this.startBtn = document.querySelector('.mask a');

this.isClear = false;

// addEventListener 方法为了调用指向 card

this.handleEvent = function(event) {

switch(event.type) {

case 'touchstart':

this.down(event);

break;

case 'touchmove':

this.move(event);

break;

case 'touchend':

this.up(event);

break;

case 'mousedown':

this.down(event);

break;

case 'mousemove':

this.move(event);

break;

case 'mouseup':

this.up(event);

break;

}

}

}

Card.prototype = {

//画涂抹区

drawGrey: function() {

this.prize.style.zIndex = 1;

this.ctx.globalCompositeOperation = "source-over";

this.ctx.beginPath();

this.ctx.fillStyle = '#aaaaaa';

this.ctx.fillRect(0, 0, c1.clientWidth, c1.clientHeight);

this.ctx.fill();

this.ctx.closePath();

this.ctx.font = "Bold 50px Arial";

this.ctx.textAlign = "center";

this.ctx.fillStyle = "#666";

this.ctx.lineWidth = 20; //线的宽度

this.ctx.lineCap = "round"; //线的两头样式为圆

this.ctx.lineJoin = "round"; //线的拐角样式为圆

this.ctx.fillText("刮一刮", c1.width / 2, c1.height / 2);

this.ctx.globalCompositeOperation = 'destination-out';

},

down: function(ev) {

ev.preventDefault();

this.isClear = true;

},

move: function(ev) {

ev.preventDefault();

var _this = this;

// 是否进入

var pos=this.getPos(this.obj);

if(!this.isClear) return;

if(ev.touches) {

var curX = ev.touches[0].pageX - pos.left;

var curY = ev.touches[0].pageY - pos.top;

} else {

var curX = ev.pageX - pos.left;

var curY = ev.pageY - pos.top;

}

var step = 16;

_this.ctx.save();

_this.ctx.beginPath();

_this.ctx.arc(curX, curY, step, 0, Math.PI * 2, false);

_this.ctx.fill();

_this.ctx.restore();

},

up: function(ev) {

ev.preventDefault();

var data = this.ctx.getImageData(0, 0, this.w, this.h).data;

var len = data.length;

var index = 0;

//涂抹过的区域为透明，判断alpha通道的值是否为0，计算涂抹区域

for(var i = 3; i 

if(data[i] == 0) {

index++;

}

}

//len/8一半

if(index >= len / 8) {

this.ctx.clearRect(10, 10, this.w - 20, this.h - 20);

this.prize.style.zIndex = 33;

this.index = 0;

}

this.isClear = false;

},

//获取积分

getPoint: function() {

var _this = this;

_this.ajax({

url: '',

type: 'post',

success: function(res) {

if(res.error == 1000 && res.data.number) {

_this.number.innerHTML = res.data.number;

}

}

})

},

//              setPoint:function(num){

//                  var _this=this;

//                  _this.ajax({

//                      url:'',

//                      type:'post',

//                      success:function(res){

//                          if(res.error ==1000 ){

//                              _this.number.innerHTML=num;

//                          }

//                      }

//                  })

//              },

/*

* 参数 {

*    url:'',      地址

*    data:'',     请求数据

*    timeout:''   超时时间 默认 5000

*    type:''      请求方式 默认 get

*    success:fn   成功函数

*    error        失败函数

* }

*/

ajax: function(json) {

json = json || {};

if(!json.url) return;

json.data = json.data || {};

json.timeout = json.timeout || 5000;

json.type = json.type.toLocaleLowerCase() || 'get';

var timer = null;

//准备 ajax 对象

if(window.XMLHttpRequest) {

var oAjax = new XMLHttpRequest();

} else {

//ie 低版本

var oAjax = new ActiveXObject('Microsoft.XMLHTTP');

}

//open 初始化 HTTP 请求参数   send 发送 HTTP 请求

switch(json.type) {

case 'get':

oAjax.open('GET', json.url + '?' + json2url(json.data), true);

oAjax.send();

break;

case 'post':

oAjax.open('POST', json.url, true);

oAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

oAjax.send(json2url(json.data));

break;

}

//每次 readyState 属性改变的时候调用的事件

oAjax.onreadystatechange = function() {

//HTTP 响应已经完全接收

if(oAjax.readyState == 4) {

clearTimeout(timer);

//状态码 200以下为成功  304 缓存

if(oAjax.status >= 200 && oAjax.status 

json.success && json.success(oAjax.responseText);

} else {

json.error && json.error(oAjax.status);

}

}

};

//网络超时

timer = setTimeout(function() {

oAjax.onreadystatechange = null;

alert('您的网络不给力');

}, json.timeout);

},

jude: function() {

var num = Number(this.number.innerHTML);

if(num 

alert('您的积分不足');

this.startBtn.parentNode.style.display = "block";

return;

}

if(num >= 100) {

num -= 100;

this.number.innerHTML = num;

this.startBtn.parentNode.style.display = "none";

}

},

bindEvent: function() {

var that = this;

this.aginBtn.addEventListener('click', function() {

that.drawGrey();

that.jude();

}, false);

this.startBtn.addEventListener('click', function() {

that.jude();

}, false);

that.obj.addEventListener('touchstart', that, false);

that.obj.addEventListener('touchmove', that, false);

that.obj.addEventListener('touchend', that, false);

that.obj.addEventListener('mousedown', that, false);

that.obj.addEventListener('mousemove', that, false);

that.obj.addEventListener('mouseup', that, false);

},

//获取到页面的位置

getPos:function(obj){

var left = 0;

var top = 0;

while(obj) {

left += obj.offsetLeft;

top += obj.offsetTop;

obj = obj.offsetParent

}

return {

left: left,

top: top

};

},

init: function() {

this.drawGrey();

//  this.getPoint();

this.bindEvent();

}

}

window.onload = function() {

var oc = document.getElementById('c1');

var card = new Card(oc);

card.init();

}