¿Haga raspaduras con Canvas y vea qué premios puede raspar?

Estoy participando en el desafío "On the Code Nuggets". Para obtener más información, consulte: ¡El desafío Code On The Nuggets está aquí!

prefacio

Vi un efecto de rayado en un sitio web de lotería hoy. Pensé que era muy interesante, así que planeé imitarlo. Después de pensarlo un poco, probablemente capté la idea básica. El efecto general utiliza Canvas para crear una música raspada que establece la probabilidad de la lotería.El proceso de producción no es tedioso y es muy simple.

experiencia

hacer

html

Un encabezado centrado y un área de tarjetas para rascar.

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

CSS

añadir estilo

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

defecto

Arrastrar el mouse no selecciona texto.

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

lienzo

Establezca el lienzo Lienzo.

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

dibujar

Determine si el mouse está presionado.

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

Si se presiona el mouse, isDraw es verdadero, se puede manchar y el gris del lienzo se mancha.

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

Cuando el mouse está levantado, isDraw está en movimiento

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

premio

Establezca el premio, p es la tasa ganadora.

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

crear un número aleatorio

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

El número aleatorio se usa para juzgar, y después de que el juicio sea exitoso, se devuelve el valor exitoso.

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

Al final

De hecho, también puedes usar esta función para hacer firmas, pinturas, etc., porque todas son cosas de untar o pintar, que probablemente sean similares. Si te interesa, puedes aprender más sobre ellas.

¡Quedan 16 días hasta el Día Nacional y 16 días hasta el feriado! ! !