Canvas로 스크래치 오프를 만들고 어떤 상품을 긁을 수 있는지 확인하십시오.

저는 "코드 너겟 챌린지"에 참여하고 있습니다. 자세한 내용은 다음을 참조하십시오. 코드 온 너겟 챌린지가 여기에 있습니다!

머리말

오늘 로또 사이트에서 스크래치 효과를 봤는데 너무 재밌어서 흉내낼 생각을 하다보니 기본 아이디어가 떠올랐습니다. 전체적인 효과는 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가 fase입니다.

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일! ! !