如何使用HTML5 Canvas 實現刮刮樂遊戲效果

canvas實現刮刮卡

這個刮刮卡用HTML5 canvas繪製。刮刮卡主要由兩層canvas繪製，底層放置隨機數，頂層放置圖片，限制每天只能刮三次，主要利用globalCompositeOperation我們可以將新圖形繪製在舊圖形之下、遮蓋部分區域、清除畫布部分區域 (不同於 clearRect() 函式只能清除矩形區域)。

ctx.globalCompositeOperation = 'destination-out';

HTML

<h2>刮刮樂小遊戲</h2>
<canvas id="bottom"></canvas>
<canvas id="top"></canvas>
<div id="btn">
  <button onclick="next()">再來一次</button>
  温馨提示：每人每天三次刮刮樂機會~
</div>

CSS

*{
   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;
}

Javascript

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);
}

drawBot();
drawTop();  

function drawTop(){
    ctxTop.canvas.style.opacity = 1;
    ctxTop.fillStyle = 'purple';
    ctxTop.fillRect(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();
    }
}

// 判斷刮開區域大於60%時，頂層canvas消失，顯示底層數據
function alertInfo(){
    var data = ctxTop.getImageData(0,0,w,h).data;
    var n = 0 ;
    for (var i = 0; i = data.length * 0.6) {
        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();
    }
}

Demo

See the Pen 刮刮樂小遊戲How to create a scratch card with HTML5 Canvas by Leon Cheng (@jq153387) on CodePen.