JavaScript 練手小案例：原生JavaScript製作 Canvas 隨機刮獎，抽妹子圖

啥也不說，先看效果圖。

刮獎是一個很有意思的東西，充滿了神祕，因爲誰也不知道掛出來的是什麼，總是期待有驚喜。

網上的刮獎大多用的“虛假刮獎”，就是上面一個 canvas 層，下面一個圖片層。把canvas “挖空”，露出了下面的圖片。

雖然，也可以實現刮獎效果，但是總覺得太low。要用一個canvas 就搞定，才完美。

今天，我就來寫一個 canvas 隨機刮妹子 的案例。

第一步：HTML

<div class="box">
    <canvas class="mycan"  id="mycan" width="300" height="200"></canvas>
</div>

canvas 是必須的。設定好大小，同時要準備好幾張妹子圖。

不出意外的話，妹子圖跟 canvas 大小是一樣的。

不要增加自己的編碼工作量。

第二步：CSS

.box{
    width: 300px;
    height: 200px;
    overflow: hidden; 
    margin-left: auto;
    margin-right: auto;
}
.box .mycan{
    display: block;
}

這個 CSS 就是做基礎的框架設置。

第三步：JavaScript

主要思路：

1、獲取 canvas ，並得到 content。

2、設置獎品圖片數組

3、【關鍵】生成一個圖片對象，new Image()，方便設置畫筆筆觸內容

      canvas 的畫筆筆觸內容除了是色彩外，還可以是圖片內容。這裏用到的關鍵就是：

  // 設置筆觸內容爲圖片，這樣畫出來的就是圖片內容，而不是單純的色彩線條
    ctx.strokeStyle = ctx.createPattern(img, 'no-repeat');

w3school 上對 createPattern 的解釋是：

createPattern() 方法在指定的方向內重複指定的元素。元素可以是圖片、視頻，或者其他 <canvas> 元素。被重複的元素可用於繪製/填充矩形、圓形或線條等等。

言外之意，通過 createPattern  方法，在 canvas 中可以用圖片來做填充部分，也可以用來做畫筆筆觸部分。

4、刮獎的過程，其實就是獲取鼠標座標，沿着座標繪製圖片的過程。所以，接下來的代碼就是獲取鼠標座標，再畫線的思路。

完整代碼如下：

// 獲取canvas ID，相當於畫布
let mycan = document.getElementById("mycan");
// 獲取canvas 的上下文，相當於 畫筆。
let ctx = mycan.getContext("2d");

// 獎品圖片
let images = [
    "images/1.jpg",
    "images/2.jpg",
    "images/3.jpg"
];

// 生成圖像對象，作爲畫筆填充內容。
let img = new Image();
img.src = images[ Math.floor( Math.random()*3 ) ];

// 初始化畫布，已經畫布上的提示文字
 let intCanvas = function(){
     ctx.fillStyle = "#999";   // 填充背景色
     ctx.fillRect(0,0,mycan.width,mycan.height); // 設置填充範圍，跟 canvas 大小一樣
     // 設置刮獎文字：顏色，字體大小，水平居中，文字內容和位置。
     ctx.fillStyle = "#000";  // 重新設置填充顏色爲黑色
     ctx.font="40px  'Microsoft Yahei'";
     ctx.textAlign = "center";
     ctx.fillText("刮開有驚喜", mycan.width/2,mycan.height/2+10);
 };

// 定義鼠標在canvas上移動的函數
let mMove = function( event ){
    let e = event || window.event;
    ctx.lineTo(e.offsetX,e.offsetY);  // 畫線條到 鼠標位置
    ctx.stroke();
};

// 鼠標按下函數
let mDown = function(event){
    let e = event || window.event;
    // 開始canvas路徑
    ctx.beginPath();
    // 畫筆起筆的地方
    ctx.moveTo(e.offsetX,e.offsetY);  // 畫線條到 鼠標位置
    // 移動鼠標就作畫
    mycan.addEventListener("mousemove",mMove);
};

// 鼠標鬆開函數
let mUp = function(){
    // 封閉canvas路徑
    ctx.closePath();
    // 移除mousemove事件
    mycan.removeEventListener("mousemove",mMove);
};

// 功能主體部分
intCanvas();

// 因爲要保證圖片加載完畢，才能執行代碼。所以，使用 img.onload 事件。
img.onload = function() {
    // 設置筆觸內容爲圖片，這樣畫出來的就是圖片內容，而不是單純的色彩線條
    ctx.strokeStyle = ctx.createPattern(img, 'no-repeat');
    // 設置畫筆的粗細
    ctx.lineWidth = 50;
    // 設置線條頭尾爲圓形。
    ctx.lineCap = "round";
    // 設置線條拐點處爲圓形
    ctx.lineJoin = 'round';

    // 鼠標按下，準備開始畫畫
    mycan.addEventListener("mousedown", mDown);
    // 鼠標擡起，停止做畫。
    mycan.addEventListener("mouseup", mUp);
};

感覺自己好久沒更新博客了，最近太忙，哎~~想我的暑假，快來啊~~啊啊啊啊啊~~~~