点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

前言

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

最后

其实使用这个还可以利用这个制作签名，绘画等功能，因为都是涂抹或者绘画东西，大概是差不多的，有兴趣可以去学习了解一下。

关于本文

来自：WebW0rld

https://juejin.cn/post/7142839691203575838

往期推荐

10 个可以副业赚钱的网站，总有一个适合你

推荐20个开源的前端低代码项目

用 Three.js 做个兔吉宝箱给大家拜个年

最后

• 欢迎加我微信，拉你进技术群，长期交流学习...

• 欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧