Canvas でスクラッチオフを作成して、スクレイピングできる賞品を見てみましょう。

「On the Code Nuggets Challenge」に参加しています 詳しくはこちらをご覧ください：Code On The Nuggets Challenge はこちら！

序文

今日、宝くじのサイトでスクラッチ効果を見たのですが、とても面白いと思ったので真似してみようと思いました。全体のエフェクトは、Canvas を使用して、抽選の確率を設定するスクラッチオフの音楽を作成します. 制作プロセスは退屈ではなく、非常に単純です.

経験

作る

html

中央のヘッダーとスクラッチ カード エリア。

<h1 style="text-align: center;">刮刮乐</h1>
<div id="ggk">
    <div class="jp">不抽大嘴巴子</div>
    <canvas id="canvas" width="400" height="100"></canvas>
</div>
复制代码

CSS

スタイルを追加

#ggk {
    width: 400px;
    height: 100px;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
}

.jp,
canvas {
    position: absolute;
    width: 400px;
    height: 100px;
    left: 0;
    top: 0;
    text-align: center;
    font-size: 25px;
    line-height: 100px;
    color: deeppink;
}
复制代码

デフォルト

マウスをドラッグしてもテキストは選択されません。

document.addEventListener("selectstart", function (e) {
    e.preventDefault();
})
复制代码

キャンバス

キャンバス キャンバスを設定します。

let canvas = document.querySelector("#canvas");
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'darkgray';
ctx.fillRect(0, 0, 400, 100);
复制代码

描く

マウスが押されているかどうかを確認します。

let isDraw = false;
canvas.onmousedown = function () {
    isDraw = true;
}
复制代码

マウスが押された場合 isDraw が true の場合、塗り付けが可能で、Canvas のグレーが塗りつぶされます。

canvas.onmousemove = function (e) {
    if (isDraw) {
        let x = e.pageX - ggkDom.offsetLeft + ggkDom.offsetWidth / 2;
        let y = e.pageY - ggkDom.offsetTop;
        ctx.beginPath();
        ctx.arc(x, y, 30, 0, 2 * Math.PI);
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fill();
        ctx.closePath();
    }
}
复制代码

マウスが上にあるとき、isDraw はフラッシュします

document.onmouseup = function () {
    isDraw = false;
}
复制代码

賞

賞金を設定します。p は勝率です。

let arr = [
    { content: '一等奖：一个大嘴巴子', p: 0.1 },
    { content: '二等奖：两个大嘴巴子', p: 0.2 },
    { content: '三等奖：三个大嘴巴子', p: 0.3 }
];
复制代码

乱数を作成する

let sj = Math.random();
复制代码

判定には乱数を使用し、判定成功後に成功値を返します。

if (sj < arr[0].p) {
    jp.innerHTML = arr[0].content;
} else if (sj < arr[1].p) {
    jp.innerHTML = arr[1].content;
} else if (sj < arr[2].p) {
    jp.innerHTML = arr[2].content;
}
复制代码

やっと

実際、この機能を使って署名や絵などを作ることもできますが、それらはおそらく似たようなものを塗ったり塗ったりしているためです.

国慶節まであと16日、連休まであと16日！! !