Grattez avec Canvas et voyez quels prix vous pouvez gagner ?

Je participe au défi "On the Code Nuggets" Pour plus de détails, veuillez consulter : Le défi Code On The Nuggets est arrivé !

avant-propos

J'ai vu un effet scratch sur un site de loterie aujourd'hui. J'ai pensé que c'était très intéressant, alors j'ai prévu de l'imiter. Après quelques réflexions simples, j'ai probablement eu l'idée de base. L'effet global utilise Canvas pour créer une musique à gratter qui définit la probabilité de la loterie.Le processus de production n'est pas fastidieux et très simple.

vivre

Fabriquer

html

Un en-tête centré et une zone de carte à gratter.

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

CSS

ajouter du style

#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;
}
复制代码

défaut

Le déplacement de la souris ne sélectionne pas le texte.

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

Toile

Définissez le canevas Canvas.

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

dessiner

Déterminez si la souris est enfoncée.

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

Si la souris est enfoncée, isDraw est vrai, il peut être maculé et le gris du canevas est maculé.

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();
    }
}
复制代码

Lorsque la souris est en haut, isDraw est flase

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

prix

Définissez le prix, p est le taux de gain.

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

créer un nombre aléatoire

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

Le nombre aléatoire est utilisé pour juger, et une fois le jugement réussi, la valeur réussie est renvoyée.

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;
}
复制代码

enfin

En fait, vous pouvez également utiliser cette fonction pour créer des signatures, des peintures, etc., car ils sont tous en train de tacher ou de peindre des choses, qui sont probablement similaires. Si vous êtes intéressé, vous pouvez en savoir plus à leur sujet.

Il reste 16 jours avant la fête nationale et 16 jours avant les vacances ! ! !