html5刮刮卡,canvas 实现刮刮卡

今天分享一个好玩的玩意儿，就是小时候最喜欢玩的刮刮卡，不同的是，这个刮刮卡用HTML5 canvas绘制。

刮刮卡主要由两层canvas绘制，底层放置随机数，顶层放置图片，限制每天只能刮三次；

Paste_Image.png

两层canvas布局

刮刮乐

*{

margin: 0;

padding: 0;

}

html,body{

width: 100%;

height: 100%;

position: relative;

color: #f40;

}

h2{

padding-top: 15%;

text-align: center;

font-size: 30px;

}

canvas{

position: absolute;

top: 50%;

left: 50%;

margin-left:-100px;

margin-top: -50px;

cursor: pointer;

}

#btn{

margin-top: 20%;

text-align: center;

}

#btn button{

font-size: 20px;

color: #fff;

background: #169bd5;

border-color: #169bd5;

border-radius: 5px;

padding: 5px 20px;

display: none;

margin: 0 auto 10px;

}

img{

width: 200px;

height: 100px;

display: none;

}

刮刮乐小游戏

再来一次

温馨提示：每人每天三次刮刮乐机会哦~

绘制底层canvas

var useNumber=0,

luckNumber=[],

mousedown,

w = 200,

h = 100;

var bottomCanvas = document.querySelector("#bottom");

var topCanvas = document.querySelector('#top');

topCanvas.width = bottomCanvas.width = w;

topCanvas.height = bottomCanvas.height = h;

var ctxBot = bottomCanvas.getContext("2d");

var ctxTop = topCanvas.getContext('2d');

bottomCanvas.style.background = "#f40";

ctxBot.font = "30px 微软雅黑";

function drawBot(){

//清除区域，为了点击再来一次进行页面重绘

ctxBot.clearRect(0, 0, w, h);

luckNumber.push(random());

//fillText(填充)实心数字 改为strokeText(描边)为空心数字

ctxBot.fillText( luckNumber[luckNumber.length-1],70,55);

}

//获取1-1000随机数

function random(){

return Math.ceil(Math.random()*1000);

}

绘制顶层canvas

var img = new Image();

img.src = "img/img.jpg";

img.onload = function (){

drawBot();

drawTop();

}

function drawTop(){

ctxTop.canvas.style.opacity = 1;

ctxTop.drawImage(img , 0 , 0 , w , h);

//判断当前是否为第一次刮开，不是则清除上一次区域

if(ctxTop.globalCompositeOperation != 'destination-out'){

ctxTop.globalCompositeOperation = 'destination-out';

}else{

ctxTop.clearRect(0, 0, w, h);

}

}

鼠标移动开始刮图层

//鼠标移动开始刮图层

topCanvas.addEventListener('touchstart', eventDown);

topCanvas.addEventListener('touchend', eventUp);

topCanvas.addEventListener('touchmove', eventMove);

topCanvas.addEventListener('mousedown', eventDown);

document.addEventListener('mouseup', eventUp);

topCanvas.addEventListener('mousemove', eventMove);

function eventDown(ev){

ev = ev || event;

ev.preventDefault();

mousedown=true;

}

function eventUp(ev){

ev = ev || event;

ev.preventDefault();

mousedown=false;

}

function eventMove(ev){

ev = ev || event;

ev.preventDefault();

if(mousedown) {

if(ev.changedTouches){

ev=ev.changedTouches[ev.changedTouches.length-1];

}

var x = ev.pageX - this.offsetLeft;

var y = ev.pageY - this.offsetTop;

ctxTop.beginPath();

ctxTop.arc(x, y, 10, 0, Math.PI * 2);

ctxTop.fill();

alertInfo();

}

}

判断刮开区域

// 判断刮开区域大于80%时，顶层canvas消失，显示底层数据

function alertInfo(){

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

for(var i=0 , j=0 ; i< data.length;i+=4){

if(data[i] && data[i+1] && data[i+2] && data[i+3]){

j++;

}

}

if(j <= w*h*0.2){

ctxTop.globalCompositeOperation = 'destination-over';

ctxTop.canvas.style.opacity = 0;

document.querySelector("button").style.display="block";

alert(luckNumber[luckNumber.length-1]);

}

}

再来一次

//点击再来一次进行页面重绘next

function next(){

useNumber++;

//判断当前点击次数

if(useNumber>2){

alert("今日抽奖次数用完啦~今日所抽号码为"+luckNumber);

document.querySelector("button").disabled = true;

}else{

drawBot();

drawTop();

}

}