使用Canvas制作刮刮乐,看看你能刮出什么奖品来?

使用Canvas制作刮刮乐,看看你能刮出什么奖品来?使用canvas制作刮刮乐,使用随机数进行抽奖,再用canvas遮住中奖部分,使用鼠标时间和canvas等操作,将遮住部分涂抹,显示中奖信息。

我正在学习《SSR 实战:官网开发指南》小册!字节跳动前端开发工程师祯民,带你基于 SSR 技术,全链路还原官网实际开发场景!现在 6 折优惠,仅需 17.94 元哦~

微信图片_20220920110236.jpg

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

前言

今天在一个彩票网站看到了一个刮刮乐的效果,觉得挺有意思的就打算来仿写一个,经过一番简单的思考大概就有了基本都想法。总体效果使用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();
})

canvas

设置Canvas画布。

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的灰色涂抹掉。

let ggkDom = document.querySelector('#ggk');
let jp = document.querySelector('.jp');
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为flase

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

今天的文章使用Canvas制作刮刮乐,看看你能刮出什么奖品来?分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/17782.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注