嘿嘿～倒數十天，今天來點不一樣的吧！Canvas 學起來不就是為了要讓生活有更多小驚喜嗎？在網路上看到有工程師分享用 Canvas 實踐線上版的刮刮樂，但刮刮樂光是中獎有什麼有趣的呢？當然要拿來造福更多人群～～各位單身工程師們走過路過不要錯過。

今天我們就要來做這款看起來是普通品牌的抽獎活動，只要把這個方法以及程式碼學起來，就可以拿來運用在告白或是些驚喜上面，而且可以自己設計刮開內容，運用範圍很廣，而且程式碼也是以 Canvas 加上監聽就可以做出來的，還等什麼先去刮刮看吧！點我刮刮看（文末開獎）

刮刮樂主體！盡情發揮創意

首先先設計主要的圖片、遮蔽區域以及刮開的線條，遮蔽區域只要用 fillRect() 即可，記得確認遮蔽的位置設定 x 坐標 與 y 坐標，背景圖片的話我是用 Canva 這款免費平台製作出來的，大家可以自由發揮。把背景圖篇以 canvas.style.background 的方式設定，並讓背景填滿 Canvas 尺寸。最後線條的話越細要刮越多次，這一整區都可以自由設計。

// 處理所有圖片
function init() {
	// 銀色遮蔽區域
  context.fillStyle = "#ddd";
  context.fillRect(50, 200, 150, 150);

  context.fillStyle = "#ddd";
  context.fillRect(310, 200, 150, 150);
	
	// 背景圖片
  canvas.style.background =
    'url("https://hsuanxcollection.files.wordpress.com/2022/10/brown-and-blue-minimalist-photography-birthday-gift-box-ideas-instagram-post.png?resize=668,668") no-repeat center';
  canvas.style.backgroundSize = "100% 100%";
  
	// 刮刮樂線條
	context.lineWidth = 20;
  context.lineJoin = "round";
}

監聽滑鼠與觸控，產生刮刮樂效果

接著我們只要為滑鼠與觸控行為加上 addEventListener ，這裡監測的方式與前幾天分享的小畫家畫版一樣，只要監測開始、移動與結束即可，也是 Canvas 非常常運用到的監聽，大家可以記起來。

想深入瞭解第三個參數布林值代表什麼可以參考這篇寫得很清楚：重新認識 JavaScript: Day 15 隱藏在 "事件" 之中的秘密

完成監聽後主要的行為都是在 mouseMove() 當中，在這個監測中我們使用合成效果當中的destination-out 的參數，讓舊圖（底圖）蓋在新圖（灰色遮蔽方塊）之上，就可以製造出刮開的效果囉！畫線的方式也很好理解， mouseDown() 的時候監聽開始的位置，接著再移動時從這個點開此繪製線條直到繪製結束，這樣的方法我們其實在小畫家那篇文章中有詳細介紹過。

關於繪畫監聽忘記的話可以參考這篇：第 14 幅 － 事件監聽實作：一個畫版與一個被程式耽誤的畫家？

// 滑鼠監聽
canvas.addEventListener("mousedown", mouseDown, false);
canvas.addEventListener("mousemove", mouseMove, false);
canvas.addEventListener("mouseup", mouseUp, false);
// 觸控監聽
canvas.addEventListener("touchstart", mouseDown, false);
canvas.addEventListener("touchmove", mouseMove, false);
canvas.addEventListener("touchend", mouseUp, false);

let isDrawing;
let startX = 0;
let startY = 0;
let removeGrayColor = 0;

function mouseDown(e) {
  isDrawing = true;
  startX = e.layerX;
  startY = e.layerY;
}

function mouseMove(e) {
  if (isDrawing) {
    removeGrayColor++;
    var x = e.layerX;
    var y = e.layerY;

    context.globalCompositeOperation = "destination-out";
    context.beginPath();
    context.moveTo(startX, startY);
    context.lineTo(x, y);
    context.closePath();
    context.stroke();
    startX = x;
    startY = y;
  }
}

function mouseUp(e) {
  isDrawing = false;
}

以上就是今天的告白神器中獎率百分之百的刮刮樂實作分享，今天主要的程式碼是參考這篇文章的：带你了解canvas中的globalCompositeOperation属性 ，感謝這位大大教學分享！

好啦！大家刮了嗎？我要破梗囉！
.
.
.
.
.

文案參考土味情話大全，祝福大家都能心想事成中大獎，晚安晚安